1.原理
body, html高度等到全屏高度
使用position:absolute;的方式來定義最外層的div, 內層的div 可以通過height:100%來渲染高, 這樣就可以說不用在js的幫助下來實現全立屏的自適應布局
關於兼容 ie6 采用讓body的上內邊距等到 top 層的高度, 下內邊距等到 bottom 層的高度, 通過這樣的效果達到中間層高度等height:100%的效果
內層 inner-box 的高度在 ie67 無法實現height:100%的效果, 因為如果在 ie67 下 父層的在 高度不確定、position:absolute 的情況下，子層height:100%無法實現
上面提到 ie6 是采用 body的內邊距的方式實現的, 所以
*height:expression(document.getElementById('content').offsetHeight+"px"); //來兼容ie7 內層 高度無法100%的問題,當然 * 是針對ie67的, 同樣就ie6有效
上句的代碼是利用父層的高度來賦值給子層, 所以在ie6也是沒問題的。
2.代碼
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> /* 全屏自適應布局 */ html,body{width:100%;height:100%;overflow:hidden;margin:0;} /*讓ie6 的內邊距 */ html{_height:auto;_padding:100px 0 50px;} .top,.content,.foot{position:absolute;left:0;} .top,.foot{width:100%;} .content{top:100px;bottom:50px;_height:100%;overflow:auto;} .top{top:0;height:100px; background:#f00;} .content{_position:relative;right:0;_top:0;_left:0; background:#000;} .foot{height:50px; bottom:0; background:#f56;} .inner-box{ height:100%; background:#faa; *height:expression(document.getElementById('content').offsetHeight+"px"); } </style> </head> <body> <!-- 頭 --> <div class="top"></div> <!-- 中間 --> <div class="content" id="content"> <!-- 內容 --> <div class="inner-box"> </div> </div> <!-- 底 --> <div class="foot"></div> </body> </html>
3.作用
通常采用這種布局的方式是針對一些 后台管理系統 的網頁來使用的, 減少js resize事件的調用, 對用戶友好, 也防止在渲染的時候由於js非常大, 造成的網頁出現空白的問題。