四種方法解決DIV高度自適應問題

本文和你們重點討論一下解決DIV高度自適應的方法，這裏主要從四個方面來向你們介紹，相信經過本文學習你對DIV高度自適應問題會有更加深入的認識。

DIV高度自適應

關於DIV高度的自適應，一直是個讓人頭疼的問題，整理了一下之前總結的方法，僅表示我也玩過。

htmlcode:

<div id="container">
<dividdivid="leftSide">這邊的高度自適應右側的高度</div>
<dividdivid="rightSide">
<scripttypescripttype="text/javascript">
for(i=0;i<10;i++){
document.write(i+'<br>');
}
</script>
</div>
</div>

可用的方法大概有如下四種：

1，用absolute設置一個足夠高的高度，在父級元素中清除溢出的部分,具體的csscode以下：

#container{font-size:14px;width:300px;overflow:hidden;

border:3pxsolidblue;margin:10pxauto0;
color:#fff;position:relative;}
#leftSide{width:100px;float:left;height:200000px;

left:0;top:0;position:absolute;background:gray;}
#rightSide{width:190px;float:right;

text-align:center;background:purple;}

其實這種方法並無真正的實現左右兩個div等高，只是用了障眼法，利用container的overflow:hidden清除了左側多餘的部 分，以達到視覺上左右等高的目的，雖然有「白貓黑貓，逮着老鼠就是好貓」的說法，可是筆者並不着重推薦這種方法，由於給父級元素添加relative，會 帶來不少沒必要要的麻煩，何況只能是設置absolute的一側自適應另外一側的高度，並不能讓兩側中任一側去自由去適應另外一側！

2，負外補丁和正內補丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相結合

#container{font-size:14px;width:300px;overflow:hidden;
border:3pxsolidblue;margin:10pxauto0;color:#fff;}
#leftSide{width:100px;float:left;background:gray;

padding-bottom:9999px;margin-bottom:-9999px;}
#rightSide{width:190px;float:right;text-align:center;

background:purple;padding-bottom:9999px;
margin-bottom:-9999px;}

3，利用javascript腳本實現動態設置高度

<scripttypescripttype="text/javascript">
varleft=document.getElementById('leftSide');
varright=document.getElementById('rightSide');
if(left.offsetHeight>=right.offsetHeight){
right.style.height=left.offsetHeight+'px';
}else{
left.style.height=right.offsetHeight+'px';
}
</script>

事實上，這種辦法真正意義上實現了兩側等高，而且能讓兩側中任一側去自由去適應另外一側，可是其缺點就在於，只有當DOM加載完成後，纔有會這樣等高的效果，若是網速夠快，這個漏洞能夠忽略不計。

4，在父級元素中填充背景

CSS code以下：

#container{font-size:14px;width:300px;overflow:hidden;
border:3pxsolidblue;

margin:10pxauto0;color:#fff;

background:url(http://www.men-ideal.com/images/unit1030.jpg)repeat-y;}
#leftSide{width:100px;float:left;}
#rightSide{width:190px;float:right;text-align:center}

目前，這種方法是最流行的，一樣也是一種「欺騙性」的解決辦法，不過除了多使用一張圖片以外，均可以堪稱完美，這也是筆者極力推薦的！

 

最後：

display:table- cell屬性指讓標籤元素以表格單元格的形式呈現，相似於td標籤。目前IE8+以及其餘現代瀏覽器都是支持此屬性的，可是IE6/7只能對你說 sorry了，這一事實也是大大制約了display:table-cell屬性在實際項目中的應用。

咱們都知道，單元格有一些比較 特別的屬性，例如元素的垂直居中對齊，關聯伸縮等，因此display:table-cell仍是有很多潛在的使用價值的，雖然說IE6/7不支持此屬性， 可是幸運的是，IE6/7一些亂糟糟的屬性與渲染，咱們能夠其餘方法實現一樣或是相似的效果。 

與其餘一些display屬性類 似，table-cell一樣會被其餘一些CSS屬性破壞，例如float, position:absolute，因此，在使用display:table-cell與float:left或是position:absolute 屬性儘可能不用同用。設置了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性，基本上就是活脫 脫的一個td標籤元素了。