1、css經典布局頭尾固定高度中間高度自適應布局下面說下要求：1頭部固定高度，寬度100%自適應父容器；2底部固定高度，寬度100%自適應父容器；3中間是主體部分，自動填滿，瀏覽器可視區域剩余部分，內容超出則中間部分出現流動條4整個內容填滿瀏覽器可視區域，并且不超出此區域！先看下效果圖：相信，做過兩年前端的同學，拿到這個需求，者階一個感覺一這挺簡單的！是的，本來就挺簡單！方法一：position:absolute定位，不設高，并改變包含塊的尺寸渲染從我腦海崩出來的第一個念頭就是定位布局position而我也是這么做的，因為要固定頭尾，所以，至少頭和尾要用到position定位。因為瀏覽器大小是可以

2、調節的，而且不同尺寸，不同分辨率的瀏覽器可視區域的高度是不固定的這就決定是中間主體部分的高度不固定。所以真正的問題核心也正在此。解決了這個問題，整個布局也就解決了一多半。上代碼，相信這也是符合大部分思路的實現方式：v!DOCTYPEHTMLvhtmlvheadvmetacharset=gb2312vtitle頭尾固定中間高度自適應布局v/titlehtml,bodyheight:100%;margin:。；padding:。#dHeadheight:100px;line-height:100px;background:#690;width:100%;position:absolute;z-in

3、dex:5;top:0;text-align:center;#dBodybackground:#FC0;width:100%;overflow:auto;top:100px;position:absolute;z-index:10;bo”:.mycontent；#dFootheight:100px;line-height:lOOpx;background:#690;width:1OO%;position:absolute;z-index:200;bottom:。；text-align:center;固定頭部100px;中間自適應部分中間自適應部分divid=dFoot、固定尾部100px結果也

4、如上圖所示，預期已經達到。經測試：IE7+、firefox、chrome、safari、opera均通過測試！_當容器被_或者fl的時候，在_v!DOCTYPEHTMLvhtmlvheadvmetacharset=gb2312vtitle無標題文檔v/title*padding:O;margin:O內容測試看下效果圖：IL無滬容測試我的電腦需要說明的是，對于一個浮動元素，如果不設定寬度，同樣采用包含塊的渲染方式，寬度取決于內容的寬度。但是，如果這個浮動元素內咅階一個右浮動的子元素，寬度會擴展到父容器的寬度。這個就不給出具體的例子了，自己可以下去測試。另外可以表現為包含塊的還有display:i

5、nline-block當然，IE如果displayinline如果hasalayout同樣會表現出包含塊渲染。這里就不深入探討了。下面對于position:absoluteorfixed定位的包含塊，做一個渲染測試。但是如果在position:absolute下，同時設定left和right或者同時設定top和bottom的話。寬度和高會被拉伸到指定位置，需要說明的這就是寬度或者高度缺省時position:absoluteorfixed情況下，瀏覽器對容器的尺寸解析方式。v!DOCTYPEHTMLvhtmlvheadvmetacharset=gb2312vtitle無標題文檔v/title*p

6、adding:O;margin:O內容測試僵+貢面電妄全工眞電八C：tDocumenandSettingzaAAdinnistrator.V收藏夾建諛麗站煜免費Hotmail爛菽取更旁附加模塩”迅盤看看-中伺第一高涪.|ooH爲【原我們看下IE6下的效果：我們看下IE6下的效果：下面效果圖：eSdJfC：VloeujnnteandSettLRgEA.dfflirkiEtrator.|：|Xj/丿LivsSt：=chpT文件叮輪輯|衛jrc3?*IJ,I.n、I1E3*xSI?FlIrXJ童看（j恢酈興l.A）工具遼ffi-Kg辺）TTi|iTcr建IS冋站T邑免費比論訂皂義取更棗附加複塊T迅雷

7、看看中國第一咼清1霽it磨頭懇r;.霹【原|倉無x|T0-E.CTQT頁面（IX安全”工具電t0t能兗成我的電胞令f聞icm但這里我要鄭重宣布：IE6除外！經測試：經測試：IE7+、firefox、chrome、safari、opera均遵從此解析模式！IE怪異模式下是不遵從這個原則的。如果不準備兼容IE6，相信已經可以到此為止了，我不想批評IE6。因為它在整個瀏覽發展歷程中是個代表，也是個經典。沒有一款瀏覽能在如此長的時間在市場上占據如此高的地位。這當然也得益于它的與xp捆綁推廣策略。但是，就近年web的發展趨勢來看，IE6已經成為一個負擔。就連微軟也力不從心。好了關于IE6我不想多談什么。

8、因為就目前國內的形式而言，完全放棄IE6只是一個美好的期望。顯然中高的高度超出了預期。顯然，不應該出現滾動條。需要body或者htmloverflow:hidden。v!DOCTYPEHTMLvhtmlvheadvmetacharset=gb2312vtitle頭尾固定中間高度自適應布局v/titlehtml,bodyheight:100%;margin:。；padding:。；overflow:hidden#dHeadheight:100px;line-height:lOOpx;background:#690;width:1OO%;position:absolute;z-index:5;to

9、p:0;text-align:center;#dBodybackground:#FCO;width:100%;overflow:auto;top:100px;position:absolute;z-index:10;bottom:100px;_height:100%_#dFootheight:100px;line-height:100px;background:#690;width:100%;position:absolute;z-index:200;bottom:。；text-align:center;v/headvbodyvdivid=dHead固定頭部100px;v/div中間自適應部分

10、中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr

11、中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbrv/divv/divvdivid=dFoot、固定尾部100pxv/divv/bodyv/html看下面效果圖：1r仝_?ifIS嚴片i*主妄耐底益折逑IET-IE5.5IE7IESMI*MBaM固定頭部margin-topborder-toppaddingtoppEiddm；bottoniborder-bottommarfjinbottomcontent-Done看右下角顯然主體部分被擋住了，并

12、沒達到我們想要的預期！結合兩種IE6下的效果表現。其實，可以歸結為height:100%造成的。也可以歸結于w3c的盒子模型；這里簡單的介紹一下IE與W3C兩種不同中的盒子模型：先看一下面兩種盒子的解析圖：mCJM=rahrbonjeTHghtT標準盒子模型margintoppadding-eftborder-toppaddingtopcontentpaddingbottomborder-bottompadc-inE-sbodeicruhtmargin-bottom；width；從上圖可以看到IE盒子模型的范圍也包括margin、border、padding、content，和標準W3C盒子模

13、型不同的是：IE盒子模型的content部分包含了border和pading。IE的盒子模型后來修復掉了，在標準模式下是表現w3c盒子模型的，在quirks模式下表現自己的盒子模型。如果在IE6盒子模型下，設定BODY的padding哪么剩余的高度被主體部分繼承，就符合我們的預期了；（當然css3中有box-sizing可以改變盒子的模型，從這方面看IE6的盒子模型，是符合邏輯的。連w3c都做了兼容吸收）那現在就是怎么觸發IE6的quirks的問題了。這里我只說幾種常見的方法，其它方法，讀者自已搜索：1、去除掉DOCTYPE聲明，顯然這不是我們想看到的結果；2、DOCTYPE之前有一個XML聲

14、明：，這只是針對IE6的方式；3、如果DOCTYPE之前有任何語句，quirks模式在任何版本的IE中（截至歸9）同樣會被觸發，例如：加一個注釋我這里采用了第二種方式，其實第三種方式更合理些，因為我們不想觸發quirks模式，造成瀏覽的不一致。但現在我們只需要在IE6下觸發quirks模式，所以采用了第二種方法。v?xmlversion=1.0encoding=GBK?v!DOCTYPEhtmlvhtmlvmetacharset=gb2312頭尾固定中間高度自適應布局/titlehtml,bodyheight:100%;bodymargin:。；overflow:hidden;_padding

15、:100px0;#dHeadheight:100px;line-height:100px;background:#690;width:100%;position:absolute;z-index:5;top:0;text-align:center;#dBodybackground:#FC0;width:100%;position:absolute;z-index:100;top:100px;bottom:100px;overflow:auto;.position:relative;_top:0;_bottom:0;_height:100%;_overflow:auto.mycontent；#d

16、Footheight:100px;line-height:100px;background:#690;width:100%;position:absolute;z-index:200;bottom:。；text-align:center;固定頭部100px;中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分中間自適應部分background:#f60;中間自適應部分vbr中間自適應部分vbr中間自適應部分vb

17、r中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbr中間自適應部分vbrv/divv/divvdivid=dFoot、固定尾部100pxv/divv/bodyv/html經測試達到預期！這樣我們想要的結果都有了。當然如果，不設定body的padding設dBody的上下

18、border也是一樣的，這個留給讀者自己下去自己測試吧。這里就不貼Demo了。缺點：為ie6做了太多的bug處理，同時還觸發了IE6的怪異模式，使得盒子解析模式跟W3C不符，這樣會影其它版塊的盒子書寫。方法二：利用boxsizing改變盒子模型其實，第二種方法跟第一種方法，有部分重疊。其中滋味，讀者自己體會吧！萬變不離其宗。其實這個方法是藍色理想上看到的一辦法。實現原理是，先為html設定box-sizing然后，加上上下padding值。布局模塊均采用position:relative定位。然后，頭部采用負向margin向上平移（因為有了htmlpadding），如查采用負top的話需要為每

19、個布局版加上負top;看實現代碼：v!DOCTYPEhtmlPUBLIC-/W3C/DTDXHTML1.0Transitional/EN HYPERLINK /TR/xhtmll/DTD/xhtmll-transitiona /TR/xhtmll/DTD/xhtmll-transitional.dtdvhtmlxmlns= HYPERLINK /1999/xhtml /1999/xhtmlvmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/vmetaname=authorcontent=Chomo/vlinkrel=start

20、href= HYPERLINK title=Home/利用box-sizing實現div仿框架vstyletype=text/css*margin:。；padding:。；html-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:100px0;overflow:hidden;html,bodyheight:100%;.topposition:relative;top:-100px;height:100px;.sidetop:-100px;position:relative

21、;height:100%;background:#fcO;overflow:auto;width:200px;float:left;margin-right:Oimportant;margin-right:-3px;overflow:auto;.top:-100px;position:relative;overflow:auto;height:100%;.bottomtop:-100px;position:relative;height:100px;background:#f60;clear:both;topside了解box-sizing的同學們應該知道，它來自離微國比較遙遠的css3世界，

22、因此IE6/IE7是不支持的，但經過驗證正常兼容IE6/IE7。IE6/IE7下，vhtmlxmlns= HYPERLINK /1999/xhtml /1999/xhtmlvmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/vmetaname=authorcontent=Chomo/vlinkrel=starthref= HYPERLINK title=Home/利用box-sizing實現div仿框架vstyletype=text/css*margin:。；padding:。；L-webkit-box-sizing:bord

23、er-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:100px0;overflow:hidden;圖bodyi.topposition:absolute;top:0;left:0;width:100%;height:100px;.sideheight:100%;background:#fcO;width:200px;float:left;margin-right:Oimportant;margin-right:-3px;overflow:auto;ioverflow:auto;height:100%;.bottomposition:relative;height:100px;background:#f60;clear:both;topside方法三：這個方法其實是從方法一和方法二結合實現的其它瀏覽器依然采用position定位，不設高度，然后，觸發包含塊的尺寸。IE6下，采用html的5眩