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

Posted 2023-02-23

【中文标题】容器行高自动填充/使用 CSS 调整

【英文标题】：Container Row height auto fill/adjust with CSS

【发布时间】：2013-11-28 02:10:04

【问题描述】：

我有一个包含两行容器的容器（包装器），并且我将两行的高度值都设为自动，以便可以根据其中的内容动态调整其大小（而不是为每一行指定特定高度，例如行-顶部高度 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

预期结果：

【参考方案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 上测试）

【讨论】：

感谢您的推荐，非常感谢。然而，这仍然不是我想要实现的，因为这需要为两行的容器设置一个特定的高度才能完成这项工作，而且它（绿色行）不会填补剩余的空白屏幕底部。附言在 Firefox 25 和 chrome 31 上测试

您也可以将height 设置为100%，就像在您的代码中一样。这不是你的目标吗？结果如下：jsfiddle.net/Q4uC8/2

是的，你是对的。我只是意识到它不能像你之前提到的那样工作的原因是因为 html，body 没有在 jsfiddle 设置为 height:100%。非常感谢。不幸的是，这在 10 以下的 IE 上不起作用，因为我认为我可以找到一个技巧来像列一样实现这一目标。

我知道我之前错过了什么 :) 非常感谢卡洛！这正是我希望实现的目标！