css - 如何使用 CSS 为子 div 设置相同的高度

Question

有 fiddle http://jsfiddle.net/only_dimon/6fgyy/ 有CSS:

.row {
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.news {
width: 190px;
margin-left: 15px;
border: solid 1px #ccc;
background: #ddd;
float: left;
box-sizing: border-box;
padding: 10px;
height: 100%;
}
.news:first-child {
 margin-left: 0;   
}

JQuery 定义 div 的高度没有问题。为什么 child div 不能得到 parent 的 100% 高度？红色表示自动高度的div高度为非设定值。为什么会这样？ 例如，overflow:hidden 使 div 成为“行”以获得 child 的最大高度。它在视觉上改变了自身的宽度。

请解释一下。

提前发送。

Answer 1

阅读 CSS height property 的规范.

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.

Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.

因此，您应该将 child 的 position 设置为 absolute(这将忽略 float 设置，并且需要为每个 child 明确水平定位) 或明确指定容器的 height，例如:

.row {
    position: relative;
    height: 400px;
    width: 600px;
    border: 1px solid #ccc;
    overflow: hidden;
    margin: 0 auto;
}

这是您的 updated fiddle .
另外，查看 this approach关于“等高列”。