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并将其显示为table / tablecells来解决此问题：

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。