html - 如何制作一个延伸到页面长度的侧边栏？

Question

如果我min-height: 700px;在侧边栏设置 a ，它可以正常工作，但是如果内容长度超过 700 像素，则侧边栏结束并且页面内容占据页面的整个宽度。我希望侧边栏沿着页面的长度向下，与内容一样长或短。如何才能做到这一点？

这是我的侧边栏的 css 代码：

#sidebar
{
    float: right;
    min-height: 700px;
    min-width: 25%;
    background-color: #FFFFFF;
}

将高度更改为100%会导致侧边栏完全消失。

这是html代码；

<bod>
  <div id="sidebar"></div>
  <div id="content">Content here....</div>
</div>

Answer 1

给它position:absolute;一个bottom:0px;

看看：http: //jsfiddle.net/AliBassam/McJG8/

HTML

<div id="parentDiv">
  <div id="content">Content here....</div>
  <div id="sidebar"></div>
</div>

CSS

#parentDiv
{
    position:relative;
    min-height:700px;
}
#sidebar
{
    position:absolute;
    right:0px;
    bottom:0px;
    top:0px;
    width:100px;
}

现在#parentDiv有min-height:700px;如果它的内容被拉伸，它#sidebar也会被拉伸。

Answer 2

不知道您要做什么的确切要求，这听起来像是一个可以使用Faux Columns轻松修复的解决方案。