使用可变同级将子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高度填充剩余空间

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