Three div height-adaptive methods
div height Adaptive, which is a common problem in web design, in order to provide reference, here are 3 kinds of div height Adaptive method: One is the JS method, the second is the background map filling method, three is "Patch Dafa" (more perverted).
1. js method
The code is as follows. Principle: Use JS to judge the height of the left and right div, if the inconsistency is set to the same.
01 |
<divstyle="width:500px;background:#cccccc;height:0px;"> |
Geneva |
< Code class= "keyword" >div id = "right" style = "width:380%;height:100%;float:left;border:1px solid #265492;" >left</ div > |
03 |
<divid="left"style="width:60%;;float:left;background:#376037;"> |
13 |
<scripttype="text/javascript"> |
15 |
var a=document.getElementById("left"); |
16 |
var b=document.getElementById("right"); |
17 |
if(a.clientHeight<b.clientHeight){ |
18 |
a.style.height=b.clientHeight+"px"; |
20 |
b.style.height=a.clientHeight+"px"; |
2. Background Map Filling method
This is the use of a lot of methods, such as 163, research, the results are as follows.
Here is a background picture fill for the parent Div, and no div is set to height.
HTML code:
2 |
<divclass="col1">第一列 左边正文</div> |
3 |
<divclass="col3">第二列 右边<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>字字</div> |
4 |
<divclass="col2">第三列 中间图片</div> |
5 |
<divclass="clear"></div> |
CSS code:
1 |
.endarea{margin : 0 auto ;&NBSP; width : 960px ;&NBSP; background : url (http://cimg 2.163 .com/cnews/img 07 /end_n_bg 1 .gif) clear : both |
2 |
.endArea .col1{float:left; width:573px; } |
3 |
.endArea .col2{float:left; width:25px; } |
4 |
.endArea .col3{float:right; width:362px;} |
3. Patch Dafa
Is the combination of a "hidden container overflow" and a "positive patch" and a "negative external patch". Comparison of alternative methods, in IE6, IE7, FF3 under test pass. Points:
1, parent div set Overflow:hidden;
2, to the highly adaptive div set padding-bottom:100000px;margin-bottom:-100000px; Two or more columns in the same vein.
The code is as follows:
03 |
<metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/> |
04 |
<title>Div高度自适应</title> |
05 |
<styletype="text/css"> |
06 |
#wrap{overflow:hidden;} |
07 |
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;} |
11 |
<divid="wrap"style="width:300px; background:#FFFF00;"> |
12 |
<divid="sidebar_left"style="float:left;width:100px; background:#777;">居左</div> |
13 |
<divid="sidebar_mid"style="float:left;width:100px; background:#999;"> |
21 |
</div><divid="sidebar_right"style="float:right;width:100px; background:#888;">居右</div></div> |
The above three methods can solve the div height adaptive, please according to your own needs, three select one.
Three div height-adaptive methods
