使用可变兄弟将子 DIV 高度限制为父 DIV 高度答案

【问题标题】：Limit Child DIV Height to Parent DIV Height With Variable Sibling使用可变兄弟将子 DIV 高度限制为父 DIV 高度
【发布时间】：2012-07-29 05:15:18
【问题描述】：

我有一个具有指定高度的容器<div>，其中包含另外两个 DIV，用于不同的介绍性副本（由客户输入），另一个用于列出各种功能。

我希望功能<div> 自动填充父级中的剩余空间，然后滚动出溢出。

我该怎么做？

CSS：

#article {
    width:940px;
    height:500px
}

#article-content {
    margin: 20px 0;
}

#article-features {
    height:100%;
    overflow-x: auto;
}

jsFiddle

【问题讨论】：

标签： css height percentage

【解决方案1】：

除了依靠 javascript 根据计算 (parent_height - 兄弟高度) 动态更改底部 div 的高度之外，没有其他方法可以使用 HTML4。

你可以看看这个：CSS HTML - DIV height fill remaining space

使用 HTML5，您可以使用 Flexbox 来使用剩余空间。请注意，有一些限制，但它可以满足您的要求。见http://caniuse.com/#feat=flexbox。

【讨论】：