html - CSS 100% Height, and then Scroll DIV not page

Question

Welcome To Ask or Share your Answers For Others

html - CSS 100% Height, and then Scroll DIV not page

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - CSS 100% Height, and then Scroll DIV not page

Okay so I haven't been able to find a question with an answer yet, so I decided to make my own.

I am trying to create a 100% fluid layout, which technically I have done. http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php

BUT, what I want to do now, is to make the page 100% in HEIGHT... But I don't want the page to scroll I want the inner DIV to scroll.

So I believe in short I want it to detect the height of the viewport screen, go 100%, and then IF content is longer then the screen, scroll the specific DIV, NOT the page.

I hope this makes sense.

Thanks in advance. Justin

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:58:31+0000

<html>
  <body style="overflow:hidden;">
    <div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0">
    </div>
  </body>
</html>

That should do it for a simple case

I believe this will work for your case

<html>
  <body style="overflow:hidden;">
      <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div>
      <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div>
      <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div>
      <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>
  </body>
</html>

this example will give you a static header and footer and allow the navigator and content area to be scrollable.

Categories

html - CSS 100% Height, and then Scroll DIV not page

html - CSS 100% Height, and then Scroll DIV not page

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags