CSS 100％高度，然后滚动DIV而不是页面

问题描述：

好吧，所以我还没有找到一个问题的答案，所以我决定做我自己。

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而不是页面

相关推荐