javascript - 动态设置元素的高度以使其溢出 : auto?

Question

我有一长串元素，我想滚动这些元素，同时保持页面的其余部分围绕它静止。

<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;
}

Answer 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 */
}