jquery allows two Div heights to be automatically adapted. This is the simplest __div.

This problem today but the whole morning, I was originally intended to use JS to achieve, the results of compatibility is difficult to deal with.

Finally chose jquery, the method is as follows (here is my recommended method), the use is simple, the compatibility is good. Only need to set a code on the page to fix, such a good thing so the code posted out for everyone's reference, in addition, there are a number of online methods, the following I have made an analysis. Everyone can look at it, please correct me. Thank

function Setsameheight (OBJ1,OBJ2)

{

var h1 = $ (obj1). Outerheight (); Get height of object 1

var h2 = $ (OBJ2). Outerheight (); Get Object 2 Height

var mh = Math.max (H1, H2); Compare

$ (obj1). Height (MH);

$ (OBJ2). Height (MH);

}

On the page, use the call:

JQuery (document). Ready (function($) {

Setsameheight (". Left", ". Line");

Setsameheight (". Right_main", ". Line");//If there are 3 div add this line of code, and then adapt once.

}

The HTML code is as follows

<Div class= "main" >

<div class= "left" >

The left side is much taller.

<BR>

<BR> <BR><BR> <BR><BR> <BR><BR> <BR><BR> <BR><BR> <BR><BR> <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 class= "line" ></div>

<div class= "Right_main" >

<P> here is Right page </p>

</Div>

</Div>

Novice Note: You need to refer to jquery on the page

<script type= "Text/javascript" src= "jquery1.4.2.js" ></script>

Summarize:

There are several ways to introduce the Internet, probably as follows, I say my opinion:

1, JS implementation (Judge 2 Div high); 2, pure CSS method; 3, add background picture to realize

1. With ordinary JS implementation, most just support ie, such as opera and Firefoxs and Google Browser, etc. are not supported, so we do not choose this. compatibility issues.

2. Pure CSS implementation, mainly set up too much trouble. CSS compatibility I don't have a test.

The code can look at this:

#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: ' [does not LEAVE IT are not real] ';

display: block;

background: inherit;

padding-top: 32767px!important;

margin-bottom: -32767px!important;

height: 0;

}

}

3. To include the main div layer plus background, actually add background I think is to give ordinary users a false image, it does not have two div height set as high. This has to do the background, but also trouble, although the internet said that many large sites are doing so, I personally feel not recommended to do so, unless there are special needs.

The following code:

#wrap { width: 776px; background: URL (bg.gif) repeat-y 300px;}

#column1 { float: left; width: 300px;}

#column2 { float: right; width: 476px;}

. clear{ clear: both;}

In short, I suggest using jquery to div height, which I hope will be useful to you.