Equal Height Columns --Solution to adaptive height in DIV CSS layout_html/css_WEB-ITnose

This is a relatively typical layout of three rows and two columns. The height of each column (the height of which column cannot be determined in advance) is the same.
is the goal pursued by every designer. According to the general practice , most of them use the method of background image filling and adding JS script to make the column heights the same.
What this article will introduce is to use the method of hiding the overflow part of the container and combining the negative bottom boundary of the column and the positive inner patch to
solve it Problem with columns having the same 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 the elements in the container. Applies padding-bottom (a sufficiently large value) to the column's block element. 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

Get highly correct, so you need to filter out the above code.

/*\*/#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 There is 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;	}}/**/

Opera9’s B2 is fixing the 8 bug.

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

Final effect

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

Please note: Netizen momomolo found during testing that when the page length reaches 2000px, there is a problem in opera, and there is no solution yet.