Question

我在特定情况下有一个共同的问题...... 我尝试自动扩展浮动div的高度，以强制它们触及其父级的底部。

以下是一个示例：http://jsfiddle.net/k95nK/1/ 我的目标是所有浮动柱都具有相同的高度，并触及比赛的底部。（所以列必须都具有最大内容的高度）父级的高度无法修复。内容必须增加父级的高度。

.content {
width : 150px;
background-color : #123456;
float : left;
margin-right : 10px
}

#allcontent {
background-color : #90c89a;
}

#allcontent:after {
content:"";
display: table;
clear: both;
}


<div id="allcontent">
    <div class="content">hello</div>
    <div class="content">hello</br>hello</div>
    <div class="content">hello</div>
</div>

我知道经常会问这种解决方案，（How to get a div to resize its height to fit container?）但是我无法找到适合我具体案例的解决方案。

我试过使用绝对定位，但它似乎使它们超出了文档流程......

Answer 1

删除float:left并将display:table-cell应用于您的内容div。

.content {
width : 150px;
background-color : #123456;
display:table-cell;
border-right:10px solid #90c89a;
}

DEMO

Answer 2

您需要在容器上放置一个高度，然后将内部div高度设置为100％，就像这样;

#allcontent {
    background-color: rgb(144, 200, 154);
    height: 320px;
}
.content {
    background-color: rgb(18, 52, 86);
    float: left;
    height: 100% !important;
    margin-right: 10px;
    vertical-align: top;
    width: 150px;
}

编辑：

不使用固定高度，您需要使用边框或填充作为div之间的间距;

.content {
    background-color: rgb(18, 52, 86);
    display: table-cell; /* **** ADD THIS STYLE **** */
border-right: 20px solid rgb(144, 200, 154); /* **** Using border with same colour as background to give spacing effect **** */
    margin-right: 10px;
    width: 150px;
}

Answer 3

如果您使用floats，则只有两种可能性。

1）为所有元素定义固定高度

.content {
    height: 288px
}

在此处查看示例jsfiddle： http://jsfiddle.net/k95nK/2/

2）使用表格

使用表格可以解决这个问题，但现在它被认为是旧技术

强制浮动div触及其父级的底部

3 个答案: