常常会碰到需要填满整个浏览器，并且自适应高度的需求。首先肯定会想到给容器设定height：100%，但是会没有效果。原因是body没有高度，所以百分比无法生效。
解决方案：给html，body，标签都加上height：100%
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding:0;margin: 0;}
html,body,.d1{height: 100%;}
.d1{background-color: red;height: 100%;}
</style>
</head>
<body>
<div class="d1"></div>
</body>
</html>
在此基础上又会衍生一些变体，比如上下2行布局，第一行固定高度，第二行自适应浏览器。要自适应浏览器高度，那么也只能用height：100%；但有个问题，就是多出了其余部分的高度
方案一：overflow:hidden
优点：简单
缺点：可能内容溢出
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding:0;margin: 0;}
html,body,.d1{height: 100%;}
body{overflow:hidden;}
.d1{background-color: red;height: 200px}
.d2{height:100%;background-color:blue;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
方案二：position：absolute/fixed，不设定高度，只设定top，bottom值，会自动拉伸填充
优点：动态计算除了固定高度外的剩余高度
缺点：
兼容：absolute --- ie8+ fixed ---- ie7+
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{height: 100%;}
.div1{height: 200px;background-color: red;position: absolute;width: 100%;top: 0;left: 0;}
.div2{position: absolute;top: 200px;bottom: 0;width: 100%;}/*绝对定位 动态计算高度 ie8 及以上*/
.div3{height: 100%;float: left;width: 200px;background-color: blue;}
.div4{height:100%;margin-left: 200px;background-color: yellow}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
<div class="div3">
</div>
<div class="div4">
</div>
</div> </body>
</html>
方案三：css3 box-sizing改变和模型，用padding抵消固定高度
优点：完美自适应
缺点：
兼容：ie8+
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{height: 100%;}
.div1{height: 200px;background-color: red;position: absolute;width: 100%;top: 0;left: 0;}
.div2{height: 100%;padding-top: 200px;box-sizing:border-box;}/*脱离文档流，改变和模型计算方式，此法用于ie8 及以上*/
.div3{height: 100%;float: left;width: 200px;background-color: blue;}
.div4{height:100%;margin-left: 200px;background-color: yellow}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
<div class="div3">
</div>
<div class="div4">
</div>
</div> </body>
</html>
方案四：利用table布局中的行会自动填满剩余table空间
优点：
缺点：比较麻烦，重新定义display 或者，用table布局
兼容：ie8+
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html,
body,
#box {
height:100%;
font:small/1.5 "宋体", serif;
}
body {
text-align:center;
}
#box {
text-align:left;
background:#666;
display:table;
width:80%;
margin:0 auto;
position:relative;
}
#box > div {
display:table-row;
}
#header,
#footer {
background:#fcc;
height:50px;
vertical-align:bottom;
}
#main {
background:#ccf;
}
#main #wrap {
display:table-cell;
background:#ffc;
vertical-align:middle;
}
#text {
text-align:center;
}
</style> </head>
<body>
<div id="box">
<div id="header">header</div>
<div id="main"> </div>
<div id="footer">footer</div>
</div>
</body>
</html>