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]thenul.list就不会占用所有可用空间。列表和页脚之间有一个间隙。相反，如果用户的浏览器小于700px，则某些列表元素会隐藏在页面底部之外。

如何使列表占据所有可用高度？

到目前为止我能想到的唯一方法是检测$header.offset()and $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 回答