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

Question

例子：

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

http://jsfiddle.net/VTNxe/

我希望绿色 div 在黄色下面，并且他的高度应该总是那么高以完全填充父 div。例如：父高度：300 & 黄色高度：100 => 绿色高度：200 或：父高度：350 & 黄色高度：50 => 绿色高度：300

即使在运行时使用 javascript 更改了黄色或绿色高度，也应该如此。是否可以仅使用 css 进行归档？

谢谢

Answer 1

http://jsfiddle.net/VTNxe/1/

玩一下position:absolute;：#top div 总是在同一个地方固定大小。然后将 aheight: 100%用于#mid div。

#parent{
    position:relative;
    border: 1px solid red;
    height: 300px;
    width: 200px;
}

#top{
    position:absolute;
    background:yellow;
    height: 100px;
    width:100%;
    top:0px;
    bottom:0px;
    z-index: 1; /* necessary, else the #mid would lay over it */
}

#mid{
    background:green;
    width:100%;
    height: 100%;
}

Answer 2

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

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

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

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

Answer 3

对您的问题的简短回答是肯定的，可以只使用 CSS。一种方法可能是使绿色框的高度为：100%；并溢出：隐藏；在父 div 中。然后改变黄色的高度会使它们看起来成比例地变化。