Javascript 动态设置元素的高度以使其溢出：自动？

我有一个很长的元素列表，我想滚动这些元素，同时保持页面的其余部分保持静止

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

问题是，如果用户的浏览器高于

700px+[页眉高度]+[页脚高度]

，则

ul.list

不会占用所有可用空间。列表和页脚之间存在间隙。相反，如果用户的浏览器小于

700px

，则某些列表元素会隐藏在页面底部

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

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

到目前为止，我能想到的唯一方法是检测

$header.offset（）

和

$footer.offset（）

，减去它们以获得它们之间的距离，并在每次触发窗口

resize

事件时设置

ul

的高度。这似乎是一个过于复杂的解决方案，似乎它应该是一个简单的问题。有更好的办法吗

顺便说一句，这是我用来使fotter粘贴到页面底部的样式

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

---

如果您知道页眉和页脚的高度，并且能够绝对定位列表，那么就足够简单了：

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

---

@杰克·帕里斯：谢谢，尽管这是一个与我的答案截然不同的解决方案。使用答案中的代码（即绝对定位等）