需求：經典布局 —— 頭尾固定高度中間高度自適應布局
頭部固定高度，寬度100%自適應父容器；
底部固定高度，寬度100%自適應父容器；
中間是主體部分，自動填滿，瀏覽器可視區域剩余部分，內容超出則中間部分出現流動條；
整個內容填滿瀏覽器可視區域，並且不超出此區域！
方法一：position:absolute定位，不設高，並改變"包含塊"的尺寸渲染
固定頭尾，所以，至少頭和尾要用到position定位。因為瀏覽器大小是可以調節的，而且不同尺寸，不同分辨率的瀏覽器可視區域的高度是不固定的，
這就決定是中間主體部分的高度不固定。所以真正的問題核心也正在此。解決了這個問題，整個布局也就解決了一多半
最重要的一段就是中間部分絕對定位，top為頭的高度，bottom為尾的高度
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>頭尾固定中間高度自適應布局</title> <style> html, body { height:100%; margin:0; padding:0 } #dHead { height:100px; background:#690; width:100%; position:absolute; z-index:5; top:0; } #dBody { background:#FC0; width:100%; overflow:auto; position:absolute; z-index:10; top:100px; bottom:100px; } .mycontent { padding:20px; } #dFoot { height:100px; background:#690; width:100%; position:absolute; z-index:200; bottom:0; } </style> </head> <body> <div id="dHead">固定頭部100px;</div> <div id="dBody"> <div class="mycontent"> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> 中間自適應部分<br> </div> </div> <div id="dFoot">固定尾部100px</div> </body> </html>
效果如下：
經測試：IE7+、firefox、chrome、safari、opera均通過測試！
方法二：利用boxsizing改變盒子模型
實現原理是，先為html設定box-sizing然后，加上上下padding值。布局模塊均采用position:relative定位。
然后，頭部采用負向margin向上平移（因為有了html padding），如查采用負top的話需要為每個布局版加上負top;看實現代碼：
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>頭尾固定中間高度自適應布局</title> <style type="text/css"> * { margin:0; padding:0; } html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden; } html, body { height:100%; } .top { position:relative; top:-100px; height:100px; background:#f60; } .side { top:-100px; position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:-3px; overflow:auto; } .main { top:-100px; position:relative; overflow:auto; height:100%; background:#f30; } .bottom { top:-100px; position:relative; height:100px; background:#f60; clear:both; } </style> </head> <body> <div class="top"> top </div> <div class="side"> side <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <div class="main"> main <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <div class="bottom"> bottom </div> </body> </html>
效果如下：
此IE6/IE7是不支持的，另外如果給頭部是absolute定位的話也是可以實現的
<style type="text/css"> * { margin:0; padding:0; } html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden; } html, body { height:100%; } .top { position:absolute; top:0; left:0; width:100%; height:100px; background:#f60; } .side { height:100%; background:#fc0; width:200px; float:left; margin-right:0 !important; margin-right:-3px; overflow:auto; } .main { overflow:auto; height:100%; background:#f30; } .bottom { position:relative; height:100px; background:#f60; clear:both; } </style> </head> <body> <div class="top"> top </div> <div class="side"> side <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <div class="main"> main <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <div class="bottom"> bottom </div> </body> </html>