html - 如何制作一个拉伸(stretch)到页面长度的侧边栏？

Question

如果我在侧边栏上设置 min-height: 700px; ，它可以正常工作，但是如果内容长度超过 700 px，那么侧边栏就会结束，页面内容会占据整个内容页面的宽度。我希望侧边栏沿着页面的长度向下延伸，与内容的长短一样。如何做到这一点？

这是我的侧边栏的 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; 如果它被内容拉伸(stretch)，#sidebar 也会拉伸(stretch)。