3

ページの残りの部分を静的に保ちながらスクロールしたい要素の長いリストがあります。

<header>
  <!-- the header is stuck to the top of the page -->
</header>
<ul class="list">
  <!-- long list of stuff which should scroll -->
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <!-- ... and so on, hundreds of elements -->
</ul>
<footer>
  <!-- the footer is stuck to the bottom of the page -->
</footer>

に高さを設定している限り、これは機能するよう<ul>です。

ul.list {
  overflow: auto;
  height: 700px;
}

700px + [header height] + [footer height]問題は、ユーザーのブラウザがそれよりも高い場合、ul.list使用可能なスペースのすべてを占有しないことです。リストとフッターの間にギャップがあります。逆に、ユーザーのブラウザが。よりも小さい場合700px、一部のリスト要素はページの下部に表示されません。

リストに利用可能なすべての高さを含めるにはどうすればよいですか？

これまで私が考えることができる唯一の方法は、とを検出し$header.offset()、$footer.offset()それらを減算してそれらの間の距離を取得しul、ウィンドウresizeイベントがトリガーされるたびに高さを設定することです。これは、単純な問題であると思われるものに対する過度に複雑な解決策のように思われます。もっと良い方法はありますか？

ちなみに、これは私がフォッターをページの下部に貼り付けるために適用したスタイリングです。

footer  {
  // stick the footer to the bottom of the page
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
}
4

1 に答える 1

1

ヘッダーとフッターの高さがわかっていて、リストを完全に配置できる場合は、次のように簡単にできます。

ul.list {
  overflow: auto;
  position: absolute;
  top:    [height of header]px;
  bottom: [height of footer]px;
}

リストの幅を固定し、中央に配置したい場合は、次のようにします。

ul.list {
  overflow: auto;
  position: absolute;
  top:    [height of header]px;
  bottom: [height of footer]px;

  left:  50%;      
  width: 600px;  /* as an example */
  margin-left: -300px; /* negative half of the width */
}
于 2012-05-09T13:46:39.663 に答える