Summary of two DIV highly adaptive Methods

In Seo, we mentioned the optimization of website styles, that is, in the layout design of websites, div + CSS is used for layout. In website systems, we often implement the same high effect on the two divs that are displayed side by side, that is, the height of each column (which column is not determined beforehand) is the same, there are several methods (the method comes from the Internet ):
1. js implementation (determine the height of two DIV );
2. pure CSS Method;
3. Add a background image.

Div + CSS basic layout:

<Div id = "mm">
<Div id = "MM1"> </div>
<Div id = "mm2"> </div>
</Div>

1. Javascript achieves Div adaptive height

CodeAs follows:
<SCRIPT type = "text/JavaScript">
<! --
Window. onload = Window. onresize = function (){
If (document. getelementbyid ("mm2"). clientheight <document. getelementbyid ("MM1"). clientheight ){
Document. getelementbyid ("mm2"). style. Height = Document. getelementbyid ("MM1"). offsetheight + "PX ";
}
Else {
Document. getelementbyid ("MM1"). style. Height = Document. getelementbyid ("mm2"). offsetheight + "PX ";
}
}
-->
</SCRIPT>

(Note: many methods are published on the Internet, but the code is more or less incorrect. The above code is error-free. The code above passes the test under ie6.0/ie7.0 and is not tested under opera and firefoxs .)

2. pure CSS Method

Code in CSS (ie passed the test, but the lower border of div is not displayed, that is, border-bottom ):

/* Adaptive start with the same height on left and right */
# M1, # m2
{
Padding-bottom: 32767px! Important;
Margin-bottom:-32767px! Important;
}
@ Media all and (min-width: 0px ){
# M1, # m2
{
Padding-bottom: 0! Important;
Margin-bottom: 0! Important;
}
# M1: before, # M2: before
{
Content: '[do not leave it is not real]';
Display: block;
Background: Inherit;
Padding-top: 32767px! Important;
Margin-bottom:-32767px! Important;
Height: 0;
}
}
/* Adaptive end of the left and right sides at the same height */

3. Add a background image

This method is used by many large network sites, such as 163 and Sina.

XHTML code:

<Div id = "Wrap">
<Div id = "column1"> This is the first column </div>
<Div id = "column1"> This is the second column </div>
<Div class = "clear"> </div>
</Div>

CSS code:

# wrap {width: 776px; Background: url(bg.gif) Repeat-y 300px ;}< BR ># column1 {float: Left; width: 300px ;}
# column2 {float: Right; width: 476px ;}< br>. clear {clear: Both ;}