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

Question

如何让<div>这两列的“内容”填满容器的整个高度？

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

这是对这个问题的跟进：让孩子们 divs the height of tallest child。

这是一个类似的问题，但解决方案似乎不起作用。 让 div (height) 占据父级剩余高度

Answer 1

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

在这里提琴

标记没有改变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