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

Question

我有一个包含两行容器的容器（包装器），并且我将两行的高度值都设为自动，以便可以根据其中的内容动态调整其大小（而不是为每一行指定特定高度，例如行-顶部高度 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，并在子级上使用值 table-row。现在，规范没有定义如何计算（匿名）单元格的高度，但是如果您将 height 设置为 100% 它似乎可以工作（至少在 Firefox 上）。

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

但是，使用这个新的布局模块，您只需在容器上将 display 设置为 flex 和 flex-direction 设置为 column。这样你就可以得到一个类似于普通块布局的布局，但是将第二行的flex 设置为1，这将被强制占用所有剩余的空间。

Working Fiddle：http://jsfiddle.net/Q4uC8/1/（仅在 Chrome 和 Firefox 上测试）