Question

jsfiddle - 正如您所看到的，所有div高度都以像素为单位（div a和div b)。最后一个（div c）有height:100%，所以它为我希望它只是填充它的父级，而不是像所有文档一样高。（黄色div溢出）。

Answer 1

将div c放在块a中并取出b -

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

Answer 2

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

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

Answer 3

Demo

它与身体一样高，包括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/

限制div的高度

5 个答案: