Question

有小提琴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的高度，没有任何问题。为什么孩子div不能获得父母100％的身高？红色表示自动高度div的高度为非设定值。为什么会这样？例如，overflow：hidden使div“row”获得childs的最大高度。它可以改变自身的宽度。

请解释我。

提前Tnx。

Answer 1

阅读CSS height property的规范。

百分比是根据高度来计算的   生成的框包含块。如果含有的高度   未明确指定块（即，它取决于内容   高度），这个元素并不是绝对定位的值   计算'自动'。根元素的百分比高度为   相对于初始包含块。

注意：对于其包含块基于块级别的绝对定位元素   元素，百分比是根据高度计算的   该元素的填充框。这是CSS1的变化，其中   总是根据内容框计算百分比   父元素。

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

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

这是你的updated fiddle 另外，请查看this approach关于“相等高度列”。

Answer 2

高度继承需要一直在树上。

尝试：

body, html { height:100% }

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

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

2 个答案: