这是一个示例布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic DIV</title>
<style>
#header {
background: green;
}
#header * {
vertical-align: middle;
}
button {
float: right;
}
#top {
background: yellow;
}
#bottom {
background: aqua;
}
</style>
</head>
<body>
<div id="header">
<label for="checker">Check</label>
<input type="checkbox" id="checker">
<label for="slider">Slider</label>
<input type="range" id="slider"><span>Some text</span>
<button type="button">Bar</button>
<button type="button">Foo</button>
</div>
<div id="content">
<div id="top">Top content</div>
<div id="bottom">Bottom content</div>
</div>
</body>
</html>
演示：http://jsfiddle.net/CZt36/1/
如何将
content DIV扩展到页面的其余部分，以使top和bottom DIV获得50％的content DIV高度？注意：我不希望支持旧的浏览器或使用JavaScript，如某些类似的文章所述。
最佳答案
height:100%表示填充父元素的所有高度。在您的情况下，内容的父元素是body，因此您需要使其100％首先；然后是专利的100％，即html。然后给标头增加一些高度，例如10％，其余部分留给内容，这样它就可以占据身体的其余部分，然后占内容的子元素50％。附加了更新的小提琴
将此添加到您的CSS
#header
{
background:green;
height:10%
}
html,body
{
height:100%;
margin:0px;
}
#content
{
height:90%;
}
#top,#bottom
{
height:50%
}
JSFiddle：http://jsfiddle.net/CZt36/5/