html - div 高度取决于剩余空间

Question

例子:

<div id="parent">
    <div id="top">
    </div>
    <div id="mid">
    </div>
</div>

http://jsfiddle.net/VTNxe/

我希望绿色的 div 在黄色的下面，并且他的高度应该总是那么高以正好填满父 div。exampke: parent-height:300 & yellow height:100 => green-height:200或者:parent-height:350 & yellow height:50 => green-height:300

例如，如果在运行时使用 javascript 更改了黄色或绿色高度，这甚至应该如此。是否可以仅使用 css 来实现这一点？

谢谢

Answer 1

如果你想坚持使用像素，我认为这是你可以只用 css 获得的最接近的:

#mid{
    position:absolute;
    background:green;
    width:100%;
    top:100px;
    bottom:0px;
}

http://jsfiddle.net/Pevara/VTNxe/4/

请注意，我将 top 属性设置为与 #top div 的高度相同。这意味着必须固定#top 的高度。正如您在问题中所述，您可能希望使用 javascript 或其他方式更改此高度。或许您可以考虑同时更换顶部？