常常会碰到需要填满整个浏览器，并且自适应高度的需求。首先肯定会想到给容器设定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>
