一，头尾固定中间高度自适应布局
布局要求：
1 头部固定高度，宽度100%自适应父容器；
2 底部固定高度，宽度100%自适应父容器；
3 中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；
4 整个内容填满浏览器可视区域，并且不超出此区域！
方法一：position:absolute定位，不设高，并改变“包含块”的尺寸渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { height:100%; margin:0; padding:0 } #dHead { height:100px; line-height:100px; background:#690; width:100%; position:absolute; z-index:5; top:0; text-align:center; } #dFoot { height:100px; line-height:100px; background:#690; width:100%; position:absolute; z-index:200; bottom:0; text-align:center; } #dBody { background:#FC0; width:100%; overflow:auto; top:100px; position:absolute; z-index:10; bottom:100px; } .content{ width:300px; height:900px; background-color: #00F7DE; } </style> </head> <body> <div id="dHead"></div> <div id="dBody"> <div class="content"></div> </div> <div id="dFoot"></div> </body> </html>