Question

示例：

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

http://jsfiddle.net/VTNxe/

我希望绿色div在黄色下面，并且他的高度应该总是那么高，以完全填充父div。例子：父母身高：300＆amp;黄色高度：100 =＆gt;绿身高：200 或：父高：350＆amp;黄色高度：50 =＆gt;绿色高度：300

如果黄色或绿色高度在运行时使用javascript更改，甚至应该是这样。是否有可能只用css来实现这个目标？

THX

Answer 1

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

使用position:absolute;玩一下：#top div在同一个地方总是固定大小。然后使用height: 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才有可能。一种方法可能是制作高度为绿色的盒子：100％;溢出：隐藏;在父div中。然后改变黄色的高度会使它们看起来像是按比例变化的。

Answer 3

如果你想坚持使用像素，我认为这是你唯一能用css得到的：

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

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

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

divs高度取决于剩余空间

3 个答案: