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 に答える