css - 限制div的高度

Question

jsfiddle - 正如你所看到的，所有的 div 高度都以像素 (div a和div b). 最后一个 (div c)has给出height:100%，所以它和整个身体一样高。我希望它只是填充它的父级，而不是和所有的一样高文件。（黄色div溢出）。

Answer 1

将 div c 放入块 a 并取出 b -

<div id="b"></div>
<div id="a">
     <div id="c"></div>
</div>

Answer 2

试试这个，你 div a 是父级，它的高度是 300px ，所以 b 和 c 的总和应该是 300px

 #a{background:red; height:300px;}
 #b{background:blue; height:50px;}
 #c{background:yellow; height:250px; width:100px;}

Answer 3

演示

它和身体一样高，包括b div。用负边距和填充修复它。

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#a{background:red; height:300px;}
#b{background:blue; height:50px; position:relative; z-index:15;}
#c{background:yellow; height:100%; margin-top:-50px; padding-top: 50px;width:100px; position:relative; z-index:5;}​

Answer 4

由于您正在对像素进行编码，因此您是否有不想设置 #c{height:250px;} 的原因？也就是说，让Div C的高度为Div A的高度和Div B的高度之差？这将确保黄色 div 始终以与红色 div 相同的高度结束。

#a{background:red; height:300px;}
#b{background:blue; height:50px;}
#c{background:yellow; height:250px; width:100px;}​

Answer 5

div#b {
    float: left;
    width: 100%;
}

这可以解决问题

http://www.jsfiddle.net/KWZdD/30/