在【Web Trick 4】CSS 实现footer固定页面底部中曾经提到过用DOM的盒子
模型结合最小高度来实现footer至于底部,这里扩展一下,以最经典的3段结
构展示一下利用百分数来实现自适应高度。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【Web Trick 6】CSS+DIV 自适应高度</title>
<style type="text/css">
html,body{
margin: 0; //覆盖浏览器默认设置
padding: 0;
height: 100%; //必须设置,这个表示body的大小是整个屏幕的大小,后面的百分数的基数是body的值
background-color: white;
}
#wrap {
width: 100%;
height: 100%;
margin: 0 auto;
}
#header {
height: 13%;
background-color: green;
}
#middle{
height: 82%;
background-color: blue;
}
#middle #sidebar {
height: 100%;
width: 20%;
background-color: pink;
float: left;
}
#middle #main {
height: 100%;
width: 80%;
background-color: red;
float: left;
}
#footer {
height: 5%;
background-color: black;
}
.clearfloat { //清除浮动
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
</div>
<div id="middle">
<div id="sidebar">
</div>
<div id="main">
</div>
<br class="clearfloat" />
</div>
<div id="footer">
</div>
</div>
</body>
</html>
只要给出父级元素的给定宽高,然后用百分数配上空的div可以达
到很多意想不到的效果