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

Question

我有一个带有两行容器的容器（包装器），并且我将两行的高度值都设置为auto，以便可以根据其中的内容动态调整大小（而不是为每行提供特定的高度，例如row-顶部高度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，这将被强制占用所有空间。

工作小提琴：http://jsfiddle.net/Q4uC8/1/（仅在Chrome和Firefox上测试）