CSS：使 div 高度适合父 div

Question

我正在尝试使浮动 div 具有填充父 div 的高度。

http://jsfiddle.net/sergep/2qPZ2/1/

结构如下：

Parent div______________________
|    Middle child
|    Left child - float:left
|    Right child - float:right

问题是左边的子元素比右边的文本少，这意味着右边增加了父div的高度（以适应div），但左边的浮动div没有效仿。

css 看起来像这样：

.bottomcontainer {
  bottom: 0;
  position: absolute;
  width: 100%;
  height: auto;
}

.bottomleft {
  background: #346CA5;
  float:left;
  width: 50%;
}


.middle {
  background: #FFCE3C;
}

.bottomright {
  background: #65B237;
  float:right;
  width: 50%;
}

如何使蓝色的.bottomleft 类粘在.bottomcontainer 的底部？ - 我正在尝试做出响应，所以我不想使用实际的像素大小！

因此，如何使里面的文字垂直居中？

Answer 1

在子 div 上使用 display:table-cell;，see here 作为可以推断的示例

Answer 2

我误解了这个问题。您可以通过在 .bottomleft 和 .bottomright 周围添加一个额外的 div 并将其显示为表格/表格单元格来解决此问题：

HTML：

<div id="nav"></div>
<div id="container">
    <div class="bottomcontainer">
        <div class="middle">
            <h2>Intro tag line here</h2>
        </div>
        <div class="bottom">
            <div class="bottomleft">
                <h2>Tag line here</h2>
            </div>
            <div class="bottomright">
                <h2>Longer tag line goes here</h2>
            </div>
        </div>
    </div>
</div>
<div name="content" id="content"></div>

CSS：

.bottom {
    display: table;
}
.bottomleft {
    display: table-cell;
    background: #346CA5;
    opacity: 1.0;
    width: 50%;
    vertical-align: middle;
}
.bottomright {
    display: table-cell;
    background: #65B237;
    opacity: 1.0;
    width: 50%;
}

还有updated Fiddle 2

删除浮动，添加绝对定位：

.bottomleft {
    background: #346CA5;
    opacity: 1.0;
    position: absolute;
    bottom: 0;
    width: 50%;
    vertical-align: middle;
}

同时检查updated Fiddle。