Equal height columns-Div + CSS layout self-adaptive Height Solution

This is a typical three-row and two-column layout. The height of each column (which column cannot be determined beforehand) is the same,
It is the goal pursued by every designer. Generally, we use background image filling and JS scripts to make the column height the same,
This article introduces how to hide the container overflow part and combine the negative bottom boundary of the column with the positive internal patch.
Solve the same column height problem.

First lookCode:

 
# Wrap {overflow: hidden;} # sideleft, # sideright {padding-bottom: 32767px; margin-bottom:-32767px ;}
 

Implementation principle:

1. The block element must be included in a container.
2. Application overflow: the elements that are hidden in the container.
3. Apply padding-bottom (a value large enough) to the block element of the column.
4. Apply the margin-bottom (a value large enough) to the block element of the column.

Padding-bottom changes the length of a column to the same height, while the negative margin-bottom changes it back to the starting position at the bottom,
At the same time, the overflow part is hidden.

Compatible with various browsers

IE Mac 5

Therefore, you must filter out the code that has been dropped.

 
/* \ */# 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. opera8 handles overflow: hidden has a bug and 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 ;}}/**/
 

B2 of opera9 is fixing the bug of 8.

Test environment: ie5.01, ie5.5, ie6.0, firefox1.5, opera8.5, and Netscape 7.2.

Final Effect

Original article: http://www.positioniseverything.net/articles/onetruelayout/equalheight

note: During the momomolo test, a netizen found that when the page length reaches 2000px, there is a problem in opera and there is no solution yet.