父div的Div填充高度？

Question

我想要一个div来填补div的剩余高度。 这是我的HTML和CSS：

CSS：

* {
    padding: 0px;
    margin: 0px;
}
#container {
    margin: 85px auto 0px auto;
    background: #444444;
    min-height: 500px;
    width: 900px;
}
#topbar {
    width: 900px;
    height: 85px;
    background: #555555;
}
#leftbar {
    width: 250px;
    height: 100%;   
    background: #666666;
}

HTML：

<div id="container">
    <div id="topbar">
    </div>
    <div id="leftbar">
    </div>
</div>

我预计leftbar填写的底部之间的高度topbar和底部container ，但它scretching container ，使leftbar是页面高度的100％。

Answer 1

您可以使用绝对定位拉伸leftbar并设置top/bottom值：

* {
    padding: 0px;
    margin: 0px;
}
#container {
    position: relative;
    margin: 85px auto 0px auto;
    background: #444444;
    min-height: 500px;
    width: 900px;
}
#topbar {
    width: 900px;
    height: 85px;
    background: #555555;
}
#leftbar {
    position: absolute;
    top: 85px;
    bottom: 0;
    width: 250px;
    background: red;
}

小提琴： http ： //jsfiddle.net/robertp/CQ7pf/

Answer 2

尝试将此添加到容器中：

position: relative;

然后将其添加到左栏：

position: absolute;
top: 0;
bottom: 0;

Answer 3

将左栏设置为position：relative;

Answer 4

所以leftbar应该是container的高度减去topbar的高度。 由于container和topbar有硬编码的高度值，它遵循leftbar将不得不也硬编码。 它不是世界上最漂亮的东西，但它比替代JavaScript更简单。

如果container高度为500px，则减去topbar （85）和container边距（85）的高度，以达到330px的高度。 由于container使用min-height ，因此如果需要，也可以使用leftbar min-height来拉伸容器。 您还应该将leftbar的位置更改为相对位置以正确渲染container的高度。

底线：

#leftbar {
position: relative;
min-height: 330px;
}