0

这是一个非常简单的演示来说明我的意思。

<!doctype html>
<html>
  <head>
    <style>
*    { margin:0; padding:0; overflow:hidden; }
html { height: 100%; }
body { height: 100%; }
#top { height: 100px; background-color:#777; }
#doc { height: 100%;  background-color:#888; overflow:scroll; }
    </style>
  </head>

  <body>
    <div id="top"></div>
    <div id="doc">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis magna purus, tincidunt nec dapibus nec, faucibus eu lorem. Integer viverra ultrices diam eget interdum. Nam volutpat dolor a nisi suscipit molestie. Suspendisse molestie mauris at tellus ornare id ultricies lectus varius. Proin nisl diam, egestas in malesuada tincidunt, egestas eu libero. Suspendisse pretium elementum facilisis. Mauris volutpat scelerisque odio, non egestas velit malesuada a. Quisque dictum nibh eget ipsum pretium nec luctus est pulvinar. In hac habitasse platea dictumst. Donec eget purus sit amet diam sodales ultricies. Aliquam erat volutpat. Proin nulla libero, dictum eu fermentum et, egestas ut lacus. Nunc gravida ligula ac velit bibendum vel luctus neque eleifend. Praesent aliquet tempus felis eget commodo.</p>
    </div>
  </body>
</html>

如您所见，滚动条一直延伸到浏览器窗口的底部。#top它以与分隔线的高度相同的量来执行此操作。#top此外，如果您缩小浏览器窗口，则必须在滚动条出现之前将底线与高度一起传递。

就像滚动条正在偏移浏览器的顶部而不是#doc顶部。在 IE9、FireFox 和 Chrome 中的结果相同。

关于如何解决这个问题的任何线索？

4

1 回答 1

0

那是因为

#doc { height: 100%; }

采用相同高度的 body & html (100%) 但 #top 减去 100px

示例：http: //jsfiddle.net/GaVgV/1/

如果您需要保持顶部在 100px，那么您需要使用 jQuery 免费计算高度。

$('#doc').height($('body').height() - $('#top').height())​

示例：http: //jsfiddle.net/GaVgV/4/

于 2012-12-26T02:23:32.257 回答