CSS Layout Adaptive Height Ultimate Approach

This article mainly introduces the CSS layout Adaptive height of the ultimate method, has a certain reference value, now share to everyone, the need for friends can refer to

The ultimate purpose of our typesetting is to allow programmers to bind quickly, the final real data can be the same, but we often encountered in the national page of the left and right two columns of height uncertainty, so we have to adapt to the two columns, see the solution

, the height of each column (in advance and not determine which column height) is the same, is the goal of each designer, according to the general practice, mostly using the background map to fill, add JS script method to make the column height is the same, This paper introduces the method of combining the negative bottom boundary and positive inner patch of the container overflow part hiding and column to solve the problem of the same column height.

Look at the code first:

#wrap {Overflow:hidden;} #sideleft, #sideright {padding-bottom:32767px; Margin-bottom: -32767px;  }

Implementation principle:

The block element must be contained within a container.

Apply Overflow:hidden to the elements in the container.

Apply the Padding-bottom (large enough value) to the block element of the column.

Apply the Margin-bottom (large enough value) to the block element of the column.

The Padding-bottom the column as high as it is, and the negative margin-bottom it back to the bottom, while the overflow part is hidden away.

Compatible with each browser

IE Mac 5

Be highly correct, so filter out the code above.

/*\*/#sideleft, #sideright {padding-bottom:32767px; Margin-bottom: -32767px;  } /**/

Opera

1. opera7.0-7.2 cannot clear the overflow part properly, so add:

/* Easy Clearing */#wrap: After {content: ' [does not LEAVE IT's not REAL] ';  Display:block;  height:0;  Clear:both;  Visibility:hidden; } #wrap {Display:inline-block;} /*\*/#wrap {display:block;} /* End Easy Clearing *//*\*/

2. OPERA8 processing Overflow:hidden There is a bug, you have to add the following code:

/*\*/#sideleft, #sideright {padding-bottom:32767px!important; Margin-bottom: -32767px!important;  } @media all and (min-width:0px) {#sideleft, #sideright {padding-bottom:0!important; margin-bottom:0!important;  } #sideleft: Before, #sideright: before {content: ' [does not LEAVE IT was not REAL] '; display:block; background:inherit; paddi NG-TOP:32767PX!important; Margin-bottom: -32767px!important; height:0; }}/**/

3.opera9 's B2 is correcting the bug of 8.

Test environment: IE5.01, IE5.5, IE6.0, Firefox1.5, Opera8.5, Netscape 7.2 through.