更新:我认为信息太多了。这是我的问题:如何在以下示例中使#middle 的高度为剩余空间的 100%:
<body>
<div id="big">
<div id="header"></div>
<div id="middle"></div>
<div id="btm"></div>
</div>
</body>
#big、body、html的高度都是100%。
header 和 bottom 的高度为 120px；
最佳答案
更新:更改了我的示例以匹配您更新后的问题
这是您的布局的一个工作示例。在 IE8、IE7、Firefox 和 Chrome 中测试。
这里的关键是不要将 middle 的高度设置为 100%。相反，你绝对定位它，top 和 bottom 等于你的 header 和 btm 元素的高度(在你的例子中，120px)。
如果将 middle 元素的高度设置为 100%，它将与 big 元素的高度相同，即 body 标签的 100%，因此你的 middle 元素会太大，导致水平滚动条。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
html
{
height: 100%;
}
body
{
background-color: #EEEEEE;
height: 100%;
padding: 0;
margin: 0;
}
#big
{
width: 100%;
height: 100%;
}
#header
{
width: 100%;
background-color: #DDD;
height: 120px;
}
#btm
{
width: 100%;
height: 120px;
position: absolute;
bottom: 0px;
background-color: #999;
}
#middle
{
width: 100%;
position: absolute;
top: 120px;
bottom: 120px;
}
</style>
</head>
<body>
<div id="big">
<div id="header">
header
</div>
<div id="middle">
middle
</div>
<div id="btm">
bottom
</div>
</div>
</body>
</html>
关于html - 另一个 CSS 高度 100% 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3741752/