我正在尝试使用标题,导航栏(导航栏右侧)和页脚来制作标准网站布局.
到目前为止我已经完成了这个：
<!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;
}
正如你所看到的,我试图设置主体和导航栏的高度和最小高度来填充剩余的垂直空间,即：
然而它并没有影响它.但是,如果我做高度：500px它会像预期的那样调整大小(当然现在这不是很好的练习,因为不同的屏幕大小等会显示页面的不同部分或视图)：
所以基本上我问我怎样才能使div填充剩下的垂直空间而不使用一些硬编码值,即100px而不是我想以百分比形式进行,因此页面在所有浏览器上看起来都是一样的
解决方法
将此代码添加到您的身体,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>
