三種有效解決DIV高度自適應(yīng)的方法
本文和大家重點(diǎn)討論一下DIV高度自適應(yīng)的三種有效解決方法，它們分別是一是JS法、二是背景圖填充法、三是“補(bǔ)丁大法”（比較變態(tài)）。
DIV高度自適應(yīng)的三種有效解決方法
DIV＋CSS設(shè)計(jì)儼然已成網(wǎng)頁(yè)設(shè)計(jì)界的標(biāo)準(zhǔn)了。這種設(shè)計(jì)的好處大家都是知道的，但有些小問(wèn)題確實(shí)很棘手，例如令人頭痛的“DIV高度自適應(yīng)”問(wèn)題。
現(xiàn)在有三種解決DIV高度自適應(yīng)行之有效的辦法，一是JS法、二是背景圖填充法、三是“補(bǔ)丁大法”（比較變態(tài)）。
1、JS法
代碼如下。原理：用JS判斷左右DIV的高度，若不一致則設(shè)為一致。
- <divstyledivstyle="width:500px;background:#cccccc;height:0px;">
- <dividdivid="right"style="width:380%;height:100%;
- float:left;border:1pxsolid#265492;">left</div>
- <dividdivid="left"style="width:60%;;float:left;
- background:#376037;">
- right<br>
- right<br>
- right<br>
- right<br>
- right<br>
- right<br>
- right<br>
- </div>
- </div>
- <scripttypescripttype="text/javascript">
- <!--
- vara=document.getElementById("left");
- varb=document.getElementById("right");
- if(a.clientHeight<b.clientHeight)
- {
- a.style.height=b.clientHeight+"px";
- }
- else
- {
- b.style.height=a.clientHeight+"px";
- }
- -->
- </script>
2、背景圖填充法
第二種解決DIV高度自適應(yīng)的方法是背景圖填充法，這是大站用得比較多的方法，如163等，研究了一下，結(jié)果如下。
這里是給父DIV設(shè)置了背景圖片填充，所有DIV都不設(shè)高度。
HTML代碼（取自163最終頁(yè)面）：
- <divclassdivclass="endArea">
- <divclassdivclass="col1">第一列 左邊正文</div>
- <divclassdivclass="col3">第二列 右邊<br/><br/>
- <br/><br/><br/><br/><br/><br/><br/><br/><br/>字字</div>
- <divclassdivclass="col2">第三列 中間圖片</div>
- <divclassdivclass="clear"></div>
- </div>
CSS代碼（取自163最終頁(yè)面）：
- .endArea{margin:0auto;width:960px;
- background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif);clear:both;}
- .endArea.col1{float:left;width:573px;}
- .endArea.col2{float:left;width:25px;}
- .endArea.col3{float:right;width:362px;}
3、補(bǔ)丁大法
最后一種DIV高度自適應(yīng)的方法就是補(bǔ)丁大法。就是 “隱藏容器溢出”和“正內(nèi)補(bǔ)丁”和“負(fù)外補(bǔ)丁”結(jié)合的方法。比較另類(lèi)一點(diǎn)的方法，在IE6、IE7、FF3下測(cè)試通過(guò)。原理自己理解。
要點(diǎn)：
1、父DIV設(shè)置 overflow:hidden;
2、對(duì)要高度自適應(yīng)的DIV設(shè)置 padding-bottom:100000px;margin-bottom:-100000px;兩列或多列同理。
代碼如下：
- <html>
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
- <title>Copterfly'sBlog</title>
- <styletypestyletype="text/css">
- <!--
- #wrap{overflow:hidden;}
- #sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
- -->
- </style></head>
- <body>
- <dividdivid="wrap"style="width:300px;background:#FFFF00;">
- <dividdivid="sidebar_left"style="float:left;width:100px;
- background:#777;">Left</div>
- <dividdivid="sidebar_mid"style="float:left;width:100px;
- background:#999;">
- Middle<br/>
- Middle<br/>
- Middle<br/>
- Middle<br/>
- Middle<br/>
- Middle<br/>
- Middle<br/>
- Middle<br/>
- Middle<br/>
- </div>
- <dividdivid="sidebar_right"style="float:right;width:100px;
- background:#888;">Right</div>
- </div>
- </body>
- </html>
請(qǐng)根據(jù)實(shí)際情況，三選一用。
【編輯推薦】
- 五大常用Div高度自適應(yīng)的方法
- IE6、IE7、Firefox中margin問(wèn)題解決辦法
- DIV布局規(guī)范中CSS類(lèi)及id命名方式
- CSS兼容：解決IE6、IE7和IE8的兼容問(wèn)題妙招
- 將XHTML+CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面技巧
