CSS 100％高度，然后滚动DIV而不是页面 [英] 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.
我试图创建一个100％的流体布局，从技术上我已经做到了。
http://stickystudios.ca/sandbox/stickyplanner/layout/index2。 php
I am trying to create a 100% fluid layout, which technically I have done. http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php
但是，我想让它现在做的是使页面100％在HEIGHT ...但我不想让页面滚动我想要内部DIV滚动。
BUT, what I want it to now do, is make the page 100% in HEIGHT... But I don't want the page to scroll I want the inner DIV to scroll.
所以我相信我想要它检测视口屏幕的高度，去100％，然后如果内容比屏幕长，滚动特定的DIV ，而不是页面。
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.
提前感谢。
Justin
Thanks in advance. Justin
推荐答案
<html>
<body style="overflow:hidden;">
<div style="overflow:auto; position:absolute; top: 0px; left:0px; right:0px; bottom:0px">
</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:0px; right:200px; bottom:50px;"></div>
<div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0px; 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.
这篇关于CSS 100％高度，然后滚动DIV而不是页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
