Question

我有一个position:fixed和height:100%

的侧边栏

然而，效果不是我想要的。高度100％是窗口的100％，因为我需要100％的容器，它被限制在页眉和页脚之间。标题也是固定的，因此主要内容在“下方”滚动，同时页脚锚定在主要内容的底部，根据加载的内容量，主内容的高度可以变化。

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

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

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

非常感谢

Answer 1

您需要将其所有父元素的高度设置为100％，或者只使用此CSS代替高度：

top: 0;
bottom: 0;
right: 0; //whichever side you want it on

Answer 2

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>

固定侧边栏固定在页眉和页脚之间

2 个答案: