我正在尝试制作一个标准的网站布局header, a 导航栏一个身体（在右侧导航栏) and a footer.
现在我已经这样做了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.header {
float: top;
width: 100%;
height: 75px;
}
.navbar {
float: left;
width: 20%;
height: 100%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.footer {
float: bottom;
width: 100%;
}
</style>
</head>
<body>
<div class="header"> Header </div>
<div class="navbar"> Nav Bar </div>
<div class="body"> Body </div>
<div class="footer"> Footer</div>
</body>
</html>
产生这个：
现在，如果我们检查 CSS：
.navbar {
float: left;
width: 20%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
正如你所看到的，我尝试设置height and 最小高度身体和nav bar填充剩余的垂直空间，即：
不过这并不影响它。但是如果我这样做height: 500px它按预期调整大小（当然，这现在不是很好的做法，因为不同的屏幕尺寸等会显示页面的不同部分或视图）：
所以基本上我问的是我怎样才能做到divs填充剩余的垂直空间而不使用一些硬编码值，即100px相反，我想以百分比的形式进行，这样页面在所有浏览器上看起来都是一样的
将此代码添加到您的 body,html 中：
body,html{
height:100%;
}
并制作你的导航栏<div id="navbar">代替<div class="navbar">然后添加高度：100%；到您的导航栏
#navbar{
height:100%
// rest of your code
}
和你的内容一样 称之为内容之类的东西，因为正文已经被使用了。
#content{
height:100%
// rest of your code
}
现在所有 div 的高度均为 100%，即完整的浏览器高度。
编辑：您的完整代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
width: 100%;
height: 75px;
}
#navbar {
float: left;
width: 20%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#content {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#footer {
width: 100%;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>