使侧边栏始终为 100% 高度

Question

我设计了一个网站，如下所示，它有一个 FIXED 标题（白色），然后是一个子标题、主要内容、侧边栏（红色）和一个页脚（灰色）。

我已经用 HTML/CSS 为网站创建了线框，但无法让侧边栏正常工作。

我希望侧边栏从子标题开始，一直到页面底部，在页脚之后结束（见下图），不管主要部分有多少内容，但是我无法让它工作。

请帮忙！这是我目前在 JSFIDDLE 上所做的工作，您可以看到侧边栏没有转到页面底部：http://goo.gl/EQ7CJh

Answer 1

从内容div中去掉position: relative，使用margin-top定位面板，如图：

#content {
    height: 100%;
}
#sidebar {
    border: 1px solid skyblue;
    width: 100px;
    position: absolute;
    margin-top:7em;
    top: 0px;
    right:0px;
    bottom: 0px;
}

Updated jsfddle

Answer 2

你可以试试这个 jsFiddle http://jsfiddle.net/2ZhpH/1093/

我已经更改了 HTML 结构并将#sidebar css 添加到此

#sidebar {
 position:absolute;
 top:48px;
 border: 1px solid skyblue;
 width: 100px;
 position: absolute;
 right: 0;
 bottom: 0px;
}

Answer 3

Demo

如果你想在包含 sub-header main 和 footer 的 div 旁边有侧栏，你应该有一个像这样的 Grid 结构

<div id="header" class="...">
</div>
<div class="divide"> <!-- divide class to have like 85% width leaving rest of it for side bar -->
   <div class="sub-header">
   </div>
   <div class="main">
   </div>
   <div id="footer">
   </div> 
</div>
  <div class="sidebar">
  </div>