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

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

1 个答案: