css - 容器行高使用 CSS 自动填充/调整

Question

我有一个包含两行容器的容器(包装器)，我将两行的高度值都设置为 auto，以便它可以根据其中的内容动态调整大小(而不是为每一行提供特定的高度，例如行-顶部高度 46% 和行底部 54%)。我正在尝试获取底部行容器的高度以使用 CSS(*不是 JavaScript)自动填充屏幕。请检查下面所附的图像以获得预期结果。请指教，谢谢。

Click here for preview at JSfiddle

HTML

<div id="content-wrapper">
    <div id="row-top">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div> 
    <div id="row-bottom">
        <iframe id="gmap"></iframe>
    </div>
</div>

CSS

#content-wrapper {
    display:block;
    height:100%;
    overflow-y: scroll;
    width:600px;
    float:left;
    background-color:yellow;
}

#row-top {
    color:#fff;
    display:block;
    position:relative;
    width:100%;
    height:auto;
    background-color:blue;
}

#row-bottom {
    display:block;
    width:100%;
    height:auto;
}

iframe#gmap {
    overflow: hidden;
    height:100%;
    width: 100%   
}

Click here for preview at JSfiddle

预期结果:

Answer 1

没有办法使用通用的 CSS。

如果你想使用通用 CSS，你必须在容器上将 display 设置为 table，并在 child 上使用值 table-row。现在，规范没有定义如何计算(匿名)单元格的高度，但是如果您将 height 设置为 100% 它似乎可以工作(至少在火狐)。

您也可以使用 CSS Flexible Box Layout Module 中定义的 CSS 属性来完成此操作，这不是 properly supported在某些浏览器的某些旧版本中。

但是，使用这个新的布局模块，您只需将 display 设置为 flex 并将 flex-direction 设置为 column 在容器上。通过这种方式，您可以获得类似于普通 block 布局的布局，但是将第二行的 flex 设置为 1，这将强制占用所有剩余空间。

工作 fiddle :http://jsfiddle.net/Q4uC8/1/ (仅在 Chrome 和 Firefox 上测试)