CSS layout adaptive height ultimate method

This article mainly introduces the ultimate method of CSS layout adaptive height, which has a certain reference value. Now I share it with everyone. Friends in need can refer to it

The ultimate goal of our typesetting is to make the program The operator can be quickly bound, and the final real data can be the same as the rendering. However, we often encounter uncertain heights of the left and right columns in Chinese-shaped pages, so we must adapt to the two columns. Please see the solution

, the height of each column (the height of which column cannot be determined in advance) is the goal pursued by every designer. According to the general practice, most of them use the method of filling the background image and adding JS script to make the columns The height of the columns is the same. This article will introduce a method that combines the partial hiding of the container overflow with the negative bottom boundary of the column and the positive inner patch 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:

Block elements must be contained in a container.

Apply overflow: hidden to elements in the container.

Apply padding-bottom (a sufficiently large value) to the block element of the column.

Apply margin-bottom (a sufficiently large value) to the block element of the column.

padding-bottom stretches the column to the same height, and negative margin-bottom returns it to the starting position at the bottom. At the same time, the overflow part is hidden.

Compatible with all browsers

IE Mac 5

is highly correct, so the above code must be filtered out.

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

Opera

1. Opera7.0-7.2 cannot clear the overflow part correctly, so add:

/* easy clearing */
#wrap:after
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]'; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
#wrap
 {
 display: inline-block;
 }
/*\*/
#wrap
 {
 display: block;
 }
/* end easy clearing */
/*\*/

2. There is a BUG in Opera8's handling of overflow: hidden. The following code must be added:

/*\*/
#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: '[DO NOT LEAVE IT IS NOT REAL]';
 display: block;
 background: inherit;
 padding-top: 32767px !important;
 margin-bottom: -32767px !important;
 height: 0;
 }
}
/**/

3. B2 of Opera9 is fixing the bug of 8.

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

The above is the detailed content of CSS layout adaptive height ultimate method. For more information, please follow other related articles on the PHP Chinese website!