html - 使 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，而是使用了 float 。为了获得相同的高度，我使用内容 div 通过 padding/margin 补偿来插入元素 div。标题和内容的背景颜色现在是独立的。你可以随意改变。内联 block 元素之间的自动边距可以随意替换为应用于 div 的常规边距，或者如果您愿意，可以将它们取走。你得到以下信息:

fiddle 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);
}