0

我有一个侧边position:fixed栏height:100%

然而，效果并不是我想要的。高度 100% 是窗口的 100%，因为我需要成为它的容器的 100%，它被限制在页眉和页脚之间。页眉也是固定的，因此主要内容在其“下方”滚动，同时页脚锚定在主要内容的底部，其高度取决于加载的内容量。

在这个jsfiddle 中，我设置了ul#toolBarList要200px演示的高度。如果放大窗口并向下滚动，侧边栏应该占据整个空白高度。我并不是要简单地在列表后面设置背景，而是侧边栏的底部应该锚定到页脚的顶部。

要了解为什么 100% 不起作用，请设置200px并100%见证列表如何溢出页脚。

答案可以是一些简洁的 javascript，或者最好是与 IE8+、最新的 chrome/firefox 兼容的所有 CSS。

非常感谢

4

2 回答 2

0

您需要将其所有父元素的高度设置为 100%，或者只使用这个 CSS 而不是高度：

top: 0;
bottom: 0;
right: 0; //whichever side you want it on
于 2013-02-22T20:51:51.310 回答
0

100% 高度仅在父元素具有明确的高度集时才有效。您可以通过在 html 元素、body 元素和介于两者之间的任何其他容器元素上设置 100% 高度来实现 100% 高度。例如，

<html style="height: 100%;">
  <body style="height: 100%;">
    <div id="page" style="height: 100%;">
      <div id="sidebar" style="height: 100%; float: left;">content</div>
      <div id="main" style="height: 100%; float: left;">content</div>
    </div>
  </body>
</html>
于 2013-02-22T20:52:42.360 回答