CSS教程:div仿框架方法

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS教程:div仿框架方法

CSS教程:div仿框架方法

編輯：CSS進階教程

網頁制作poluoluo文章簡介：問div仿框架方法的人很多，我對此有比較深入的研究，但自己從來沒有給出過完整的解答與分析，覺得有些對不住藍色理想的列祖列宗.

參與測試的浏覽器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系統：Windows

問這樣的問題的人很多，我對此有比較深入的研究，但自己從來沒有給出過完整的解答與分析，覺得有些對不住列祖列宗。

先請看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>div仿框架布局</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} /*---ie6---*/ html { _padding:70px 10px;} .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

大家看到，此時div的實際高寬，完全由left / right / top / bottom這四個屬性所掌控著，於是我們便可以借助這個特性，輕松地完成div仿框架的效果了：

讓我們將應該有滾動條的地方的滾動條效果折騰出來：

運行代碼框
<!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>div仿框架布局 - 加上滾動條，一個div仿框架的基礎概型已經完成</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html,body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px; overflow:auto;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px; overflow:auto;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> 加上滾動條，一個div仿框架的基礎概型已經完成 </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

以上方法其實早已由wiseinfo在 Html+CSS 構建 B/S結構軟件界面 — 布局篇 — position方式中進行過介紹，在該文中，ie6亦是分而治之的，它的方法是在html代碼頂部加入“<?xml version=”1.0″ encoding=”UTF-8″?>”，使得ie6進入quirks mode（怪異模式）來完成ie6下的div仿框架，但這樣做將出現一些影響比較顯著的弊端：

quirks mode下的ie6連盒模型都變了，就是說你在頁面中寫任何內容就要慎用padding和border，況且quirks mode下的變化還不止這一點。
如果底部使用絕對定位，則會發生“絕對定位基對象（在此為body）高度為偶數時，出現1px空隙”的bug。

運行代碼框
<?xml version="1.0" encoding="UTF-8"?> <!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>div仿框架布局 - 將ie6導入了quirks mode（怪異模式），很有弊端</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} .div1 { background:#fc0; line-height:1.6; width:400px; height:100px; border:50px solid #f60; padding:20px;} .div2 { background:#f60; line-height:1.6; width:400px; height:100px; position:absolute; bottom:0; left:0;} </style> </head> <body> <div class="div1">該頁面請在ie6和非ie6下對比，ie6下連盒模型都變了，就是說你在頁面中寫任何內容就要慎用padding和border，況且quirks mode下的變化還不止這一點。</div> <div class="div2"> 如果底部使用絕對定位，則會發生“絕對定位基對象（在此為body）高度為偶數時，出現1px空隙”的bug。 您可以試著改變浏覽器的大小進行觀測。 </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

於是我們需要另辟蹊徑。

在很多次失敗之後，我終於發現有一個標簽可以救ie6於水深火熱，那就是最偉大的“<html>”標簽，它繼承了ie6 quirks mode（怪異模式）下的盒模型狀態。

利用這一點，我們可以在不太輕松的調整之後完成以下效果：

再用下我們的二列布局知識來完成最終形態，在此我們將艷遇著名的3px bug（不喜歡它可以找點別的辦法）：

運行代碼框
<!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>div仿框架布局 - 再分出兩列</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { padding:70px 10px; height:100%; background:#fff; overflow:hidden;} body { height:100%; background:#fff; overflow:hidden;} div { background:#f60; line-height:1.6;} .top { height:50px; margin-top:-60px; margin-bottom:10px; position:relative;} .side { height:100%; float:left; width:200px; overflow:auto; position:relative;} .main { height:100%; margin-left:207px; overflow:auto; position:relative;} .bottom { height:50px; margin-top:10px; position:relative;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> 再分出兩列（還是請在ie6下浏覽） </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

現在我們擁有了ie6的仿框架和非ie6的div仿框架的最終形態，只需要利用hack做個簡單的加法則行了：
（當然，同一屬性寫兩遍，後面的屬性所對應的值將覆蓋前者，這個基礎的優先級基礎大家還需要溫故一下。）
（再“當然”一下——當然，有人對hack深惡痛絕，那麼請在使用之前，閱讀此文看看是否能消消心頭之恨。）

運行代碼框
<!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>div仿框架布局 - 讓我們蕩起雙槳</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} /*---ie6---*/ html { _padding:70px 10px;} .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> 讓我們蕩起雙槳 一個兼容性很好的div仿框架的基礎概型便完成了 </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

它很強大而實用，真的：

運行代碼框
<!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>div仿框架布局 - 如果您有豐富的想象力，還可以玩些更刺激的</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html,body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:100px; bottom:100px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} .mainTop { position:absolute; height:30px; top:60px; left:220px; right:10px;} .mainBottom { position:absolute; height:30px; bottom:60px; left:220px; right:10px;} /*--- ie6 ---*/ html { _padding:100px 10px;} .top { _margin-top:-90px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _padding:30px 0; _margin-top:-30px; _float:left; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .mainTop { _margin-bottom:10px; _margin-left:210px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .mainBottom { _margin-top:10px; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top"></div> <div class="mainTop"></div> <div class="side"> </div> <div class="main"> 如果您有豐富的想象力，還可以玩些更刺激的。 </div> <div class="mainBottom"></div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

上一頁:10個非常有用但是IE浏覽器不能使用的CSS屬性
下一頁:CSS實例:CSS制作的像素圖

CSS進階教程

CSS：閉合元素和浮動元素的差別: 提示：本文不是教程，而是對閉合浮動元素的方法在某個特定情況下的現象的討論，涉及float、clear
表格邊框陰影和背景漸變效果: 表格邊框陰影效果，先看代碼：以下是引用片段：<style> table{filter:
IE7與web標准設計（1）: IE歷來被web標准的擁護者所诟病，而當FireFox橫空出世以後，更多的網頁制作者開始關注web標

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

解析css中30個最常用的選擇器理解document.all[]:DOM文檔對象模型頁面設計中Css十大注意只用css制作圓角 CSS3設計實例:12個優秀的按鈕和菜單 CSS網頁布局錯位:CSS寬度計算 CSS實例教程:CSS制作虛線的2種方法避免表格table被撐開變形的CSS 編寫適合所有項目的通用的reset.css CSS圓角技術

DIV CSS 佈局教程網

相關文章