本文和大家重點討論一下DIV高度自適應的三種有效解決方法，它們分別是一是JS法、二是背景圖填充法、三是“補丁大法”（比較變態）。
DIV高度自適應的三種有效解決方法
DIV＋CSS設計俨然已成網頁設計界的標准了。這種設計的好處大家都是知道的，但有些小問題確實很棘手，例如令人頭痛的“DIV高度自適應”問題。
現在有三種解決DIV高度自適應行之有效的辦法，一是JS法、二是背景圖填充法、三是“補丁大法”（比較變態）。
1、JS法
代碼如下。原理：用JS判斷左右DIV的高度，若不一致則設為一致。
- <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高度自適應的方法是背景圖填充法，這是大站用得比較多的方法，如163等，研究了一下，結果如下。
這裡是給父DIV設置了背景圖片填充，所有DIV都不設高度。
Html代碼（取自163最終頁面）：
- <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最終頁面）：
- .endArea{margin:0auto;width:960px;
- background:url(/School/UploadFiles_7810/201203/20120303165659962.gif);clear:both;}
- .endArea.col1{float:left;width:573px;}
- .endArea.col2{float:left;width:25px;}
- .endArea.col3{float:right;width:362px;}
3、補丁大法
最後一種DIV高度自適應的方法就是補丁大法。就是 “隱藏容器溢出”和“正內補丁”和“負外補丁”結合的方法。比較另類一點的方法，在IE6、IE7、FF3下測試通過。原理自己理解。
要點：
1、父DIV設置 overflow:hidden;
2、對要高度自適應的DIV設置 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>
請根據實際情況，三選一用。