Div中高度自适应增长方法 

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

 <title>Div高度自适应</title>  

 <style type="text/css">  

 #wrap{overflow:hidden;}  

 #sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}  

 </style>  

 </head>  

 <body>  

 <div id="wrap" style="width:300px; background:#FFFF00;">  

 <div id="sidebar_left" style="float:left;width:100px; background:#777;">居左</div>  

 <div id="sidebar_mid" style="float:left;width:100px; background:#999;">  

 居中<br />  

 居中<br />  

 居中<br />  

 居中<br />  

 居中<br />  

 居中<br />  

 居中<br />  
 居中<br />  

 居中<br />  居中<br />  

 居中<br />  居中<br />  

 居中<br />  居中<br />  

 居中<br />  居中<br />  

 居中<br />  居中<br />  

 居中<br />  居中<br />  

 居中<br />  居中<br />  

 居中<br /> 
 </div>
 <div id="sidebar_right" style="float:right;width:100px; background:#888;">居右</div></div>  

 </body>  

 </html>

方法二：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>123</title>
</head>
<body>
<div style="width:500px;background:#cccccc;height:0px;">  
<div id="right" style="width:380%;height:100%;float:left;border:1px solid #265492;">left</div>  
<div id="left" style="width:60%;;float:left;background:#376037;">  
right<br>  
right<br>  
right<br>  
right<br>  
right<br>  
right<br>  
 
</div>  
</div>  

<script type="text/javascript">  
<!--    --> 
var a=document.getElementById("left");  
var b=document.getElementById("right");  
if(a.clientHeight<b.clientHeight){  
a.style.height=b.clientHeight+"px";  
 }else{   
   b.style.height=a.clientHeight+"px";  
 }  

 </script> 


</body>
</html>

方法三 背景图填充法

这是大站用得比较多的方法，如163等，研究了一下，结果如下。

这里是给父DIV设置了背景图片填充，所有DIV都不设高度。

HTML代码：

view sourceprint?1 <div class="endArea">  

2 <div class="col1">第一列　左边正文</div>  

3 <div class="col3">第二列　右边<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div>  

4 <div class="col2">第三列　中间图片</div>  

5 <div class="clear"></div>  

6 </div> 

CSS代码：

view sourceprint?1 .endArea{margin:0 auto; width:960px; background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif); clear:both;}  

2 .endArea .col1{float:left; width:573px; }  

3 .endArea .col2{float:left; width:25px; }  

4 .endArea .col3{float:right; width:362px;}

 

 

posted @ 2013-12-27 15:47  代号 11  阅读(895)  评论(0)  编辑  收藏  举报