0

有小提琴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 “行”以获得孩子的最大高度。它在视觉上改变了自身的宽度。

请给我解释一下。

提前Tnx。

4

2 回答 2

2

阅读CSS 高度属性的规范。

该百分比是相对于生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为'auto'。根元素上的百分比高度是相对于初始包含块的。

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

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

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

这是您更新的小提琴。
另外，请查看有关“等高列”的这种方法。

于 2013-01-31T17:33:14.340 回答
1

高度继承需要一直向上。

尝试：

body, html { height:100% }

.row {
    width: 600px;
    border: 1px solid #ccc;
    overflow: hidden;
    margin: 0 auto;
    height:100%;
    position: relative;
}
于 2013-01-31T17:24:56.780 回答