Question

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

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

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

请帮忙！以下是我目前在JSFIDDLE上所做的努力，因为您可以看到侧边栏没有显示在页面底部：http://goo.gl/EQ7CJh

Answer 1

从内容div移除位置：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

如果你想在包含子标题主页和页脚的div的旁边有侧栏，你应该有这样的网格结构

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

使侧边栏始终为100％高度

3 个答案:

Demo