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

时间:2012-07-31 12:30:17

标签: css height percentage

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

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

我该怎么做?

CSS:

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

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

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

jsFiddle

1 个答案:

答案 0 :(得分:3)

除了依赖javascript根据计算动态更改底部div的高度(parent_height - sibling_height)之外,无法使用HTML4。

您可以看一下:CSS HTML - DIV height fill remaining space

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