DIV+CSS自适应窗口高度
程序员文章站
2022-05-01 11:30:50
...
<html>
<head>
<title>DIV+CSS自适应窗口高度</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
color: #ffffff;
}
#header {
width: 100%;
height: 100px;
margin: 0 auto;
padding: 0px;
background-color: #000099;
}
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0px;
background-color: #ffffff;
}
#nav {
float: left;
width: 120px;
margin: 10px 10px 10px 5px;
background-color: #009900;
}
#content {
margin: 10px 10px 10px 145px;
background-color: #990099;
}
#footer {
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
background-color: #990000;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="wrapper">
<div id="nav">Nav</div>
<div id="content">Content</div>
</div>
<div id="footer">Footer</div>
</body>
</html>当nav和content的高度大于一页的时候，不能满足这个需求，所以需要给nav和content设置min值。
下一篇： 监听器（Listener）