Question

如果我在侧边栏上设置min-height: 700px;，它可以正常工作，但是如果内容长度超过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轻松修复的解决方案。

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

2 个答案: