HTML盒子占据空间怎么算,html – 让div占用剩余的空间(高度)？

参见英文答案 >

Make a div fill the height of the remaining screen space                                    31个

HTML

First

Second

Thrid

Content!

CSS

.container

{

height: 300px;

border: black 1px solid;

}

.container > .header

{

background: grey;

}

.container > .header > span

{

display: inline-block;

padding: 10px;

}

.container > .header > .active

{

background: black;

color: white;

}

.container > .body

{

height: 100%;

overflow: auto;

background: lightgrey;

}

我的问题是,我有高度300 px的容器div,然后我有未知高度的标题(取决于它上面的项目数量和屏幕大小,它可能超过一行.)我怎么办如果它有更多的内容,那么.body会占用余下的空间并显示一个卷轴.

我的第一个想法是摆弄绝对定位,但当我有多行.header项目时这不起作用..

我无法更改html,因为它是由第三方组件生成的(我可以,但这将是很多工作),我宁愿避免使用JavaScript,如果我可以..