0

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

单击此处在 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%   
}

单击此处在 JSfiddle 进行预览

预期结果：

应该看起来像这样

4

1 回答 1

2

没有办法使用通用的 CSS。

如果你想使用通用 CSS，你必须在容器上设置display为table，而在子级上使用 value table-row。现在，规范没有定义如何计算（匿名）单元格的高度，但如果你设置它height似乎100%可以工作（至少在 Firefox 上）。

您也可以使用 CSS Flexible Box Layout Module中定义的 CSS 属性来执行此操作，某些旧版本的某些浏览器不正确支持该属性。

但是，使用这个新的布局模块，您只需在容器上设置displaytoflex和flex-directionto 。column这样你得到一个像普通块布局一样的布局，但是设置flex为1第二行，这将被迫占用所有剩余的空间。

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

于 2013-11-28T02:33:43.800 回答