DIV CSS 佈局教程網

本文和大家重點討論一下解決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}  

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

【編輯推薦】

1. CSS元素水平居中行之有效的辦法
2. CSS textarea高度自適應問題解決方案
3. CSS樣式表高效使用八大秘訣
4. 五大常用Div高度自適應的方法
5. CSS技巧：3種常用方法解決div列高度自適應