利用box-sizing實現div仿框架

作者：Eve Cole 更新時間：2009-12-07 16:08:04

[參與測試的瀏覽器：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[作業系統：Windows]

先看程式碼：

運行程式碼框
<!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" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>利用box-sizing實作div仿框架</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; margin-top:-100px; height:100px; background:#f60;}
.side { position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:-3px;}overflow:auto;}
.main { position:relative; 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
 
 
 
 
 
 
</div>
<div class="main">
main
 
 
 
 
 
 
</div>
<div class="bottom">
bottom
</div>
</body>
</html>

[Ctrl+A 全部選擇提示：你可先修改部分程式碼，再按執行]

關鍵部分：

html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden;}

原理大概就是這樣的：

千言萬語抵不過一副畫，透過整容前後的對比，大家應該可以看出box-sizing:border-box的作用了。

了解box-sizing的同學們應該知道，它來自離微國比較遙遠的css3世界，因此IE6/IE7是不支持的，但我很負責任滴說：本demo正常兼容IE6/IE7。

因為…

IE6/IE7下，<html>的box-sizing預設值本來就是border-box（註：IE7有一點點不正常，overflow:hidden後神誌有所恢復，將不影響本demo正常運作）。、

現在的問題就是是不是要採用這個方法了，給點優劣的對比，大家自行斟酌吧：

比較使用絕對定位的方法來實現，這個方法在目前主要存在兩個優勢：

針對每種瀏覽器基本使用的相同方法，css程式碼簡單，易於修改、易理解。
相容。絕對定位的方法在OP10下存在著暫時找不著修復bug的辦法，只好繞著彎走了。

它最大的劣勢就是欠靈活，如果沒有IE6，我想我是堅決選擇絕對定位的方法的。

以下為應用實例demo。

運行程式碼框
<!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" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>利用box-sizing實作div仿框架</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; position:relative; overflow:hidden;}
html,body { height:100%;}
.top { position:relative; margin-top:-100px; height:100px; background:#f60;}
.side { position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:-3px;}overflow:auto;}
.main { position:relative; overflow:hidden; height:100%; background:#f30; padding-top:100px; margin-top:-100px; top:50px; margin-left:200px; _mar-left:00; z-index:2;}
.main iframe { height:100%; width:100%; background:#fff; position:absolute; left:0; top:0;}
.bottom { position:relative; height:100px; background:#f60; clear:both;}
</style>
</head>
<body>
<div class="top">
top
</div>
<div class="side">
side
 
 
 
 
 
 
</div>
<div class="main">
<iframe frameborder="0" src=" http://www.g.cn/"></iframe >
 
 
 
 
 
 
</div>
<div class="bottom">
bottom
</div>
</body>
</html>

[Ctrl+A 全部選擇提示：你可先修改部分程式碼，再按運行]

一個應注意的問題：

不要給body以overflow:hidden，它將會無情地隱藏掉任何在它以外的任何東西，包括top/bottom（header/footer）；

一個應理解的要點：

[100%+(N)px] 的高度產生的方法：div { height:100%; padding-top:(N)px;} 。