Question

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

<!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中的结果相同。

有关如何解决此问题的任何线索？

Answer 1

多数民众赞成是因为

#doc { height: 100%; }

采取与身体相同的身高html（100％）但#top减去100px

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

如果你需要在100px中保持顶部，那么你需要使用jQuery来计算高度。

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

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

滚动条已抵消

1 个答案: