css - 使用可变同级将子 DIV 高度限制为父 DIV 高度

Question

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

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

我该怎么做？

CSS:

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

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

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

jsFiddle

Answer 1

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

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

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