css| skills | Solve div column height self-adaptive methods There are a number of ways, here are three of the most commonly used methods for everyone (the following examples are the parent main, Divleft, divright, for example).
1, the use of "clear:both" background to fill (recommended!!! )
This is the most widely used approach, and I've been using this method to solve the div column height self adaptation problem. Three lines of two column layout, the main content on the right, page width 780px, left column 240px, right column 540px.
CSS code: #main {
width:780px;
margin:0;
Background:url (bg.gif) #FFFFFF repeat-y left;
Text-align:left;
}
#divleft {
Float:left;
width:240px;
}
#divright {
Float:right;
width:540px;
}
. clear{
border-top:1px solid Transparent!important;
MARGIN-TOP:-1PX!important;
border-top:0;
margin-top:0;
Clear:both;
Visibility:hidden;
}
HTML code: <div id= "Main" >
<div id= "Divleft" ></div>
<div id= "Divright" ></div>
<div class= "Clear" ></div>
</div>
Advantages:No hacks, complete adaptive height.
2. Script Control Height
Add the following code to the <body> (assuming the divright is relatively high):
<script language= "JavaScript" >
document.getElementById "Divleft"). Style.height=document.getelementbyid "Divright"). scrollheight+ "px"
</script>
Advantages:Code Super Simple
Disadvantages:This method is relatively passive to determine that the height of a column is always relatively high.
3, margin negative parent-child container height inheritance
This method can better solve the problem of the same column height. Three lines of two column layout, the main content on the left, Web page width of 780px, left column 540px, right column 240px.
CSS code:
#main {
width:540px;
Float:left;
Background: #FFFFFF;
Text-align:left;
}
#divleft {
width:540px;
Float:left;
position:relative;
margin-left:-540px;
}
#divright {
width:240px;
Float:right;
position:relative;
margin:0 -240px 0 0;
Background: #F0F0F0;
}
HTML code:
<div id= "Main" >
<div id= "Divleft" >
<div id= "Divright" ></div>
</div>
</div>
Perhaps just contact the Web standards's friends do not understand this method, now blank analysis:
A
[B][c]
A contained c,c in the upper structure contains B. When the height of B is the highest, then a and C will inherit the height of B, and if A and B positions coincide, the background of B will be displayed, and when C is the highest height, then a inherits the height of C, and if A and B overlap, the background of a is displayed. This shows that the div column height is the same regardless of the highest or highest c.
Advantages:Both have the advantage of the first method and are slightly simpler than the code for the first method.
Disadvantages:The overall structure can only be left-aligned.
