使div占用父容器的剩余垂直空间。

Question

如何获取这两列中的“内容”<div>来填充容器的整个高度？

jsfiddle：http://jsfiddle.net/7m4f7/8/

这是对此问题的跟进：Make children divs the height of tallest child。

这是一个类似的问题，但解决方案似乎不起作用。 Make div (height) occupy parent remaining height

Answer 1

我没有使用display：inline-block，而是使用了浮点数。 为了获得相同的高度，我使用内容div通过填充/边距补偿推送项目div。 标题和内容的背景颜色现在是独立的。你可以随意改变。 内联块元素之间的自动边距可以替换为随意应用于div的常规边距，或者如果您更喜欢将它们取走。 你得到以下：

小提琴here

标记没有改变 Css如下

.row {
    border: 1px solid red;
    overflow:hidden;
}

.item {   
    float:left;
    margin-right:4px; 
}

.title, .content {
    border: 1px solid rgba(0,0,0,0.2);
}
.content  {
       padding-bottom:1000px;
    margin-bottom:-1000px;
        background: rgba(0,0,0,0.1);
}
.title {
    background-color: rgba(0,0,0,0.2);
}

Answer 2

不完全是你要求的，但也许这就足够了。当您添加vertical-align: top;时，顶部边缘将很好地对齐

.item {
    background: rgba(0,0,0,0.1);
    display: inline-block;
    vertical-align: top;
}

JSFiddle