Question

所以在我的JSFiddle中，我试图让div.content.groepsfeest填满剩余的高度，以使底部与左侧div的底部正确对齐。

我的代码：http://jsfiddle.net/Rings/z4tLcvxz/

Answer 1

使用显示： table-row和table-cell

像：

.events {
    display: table-row;
}
.events .left {
    width: 50%;
    display: table-cell;
}
.events .right {
    width: 50%;
    display: table-cell;
    border: 1px solid #ee3940;
}

http://jsfiddle.net/z4tLcvxz/1/

来自Pattle's answer的flex解决方案还可以，但请记住此方法的一些浏览器限制：

http://caniuse.com/flexbox

Answer 2

尚未提及的一个选项是使用flexbox。您需要将列添加到包含div的{{1}}包含的内容

display: flex

然后提供所有列.flex-container { clear: both; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; }。 Here is an example

Child <div>填充float <div> left </div> </div>的剩余高度

2 个答案: