Pure CSS realizes the automatic equalization of sidebar/column height_html/css_WEB-ITnose

Here is a direct introduction to what I think is the best method for automatically equalizing sidebar/column heights. The core CSS code is as follows (the value is not fixed):

Margin-bottom:-3000px; padding-bottom:3000px;

Together with the overflow:hidden attribute of the parent tag, a high degree of automation can be achieved equal effect.

Give a simple example, the following CSS and HTML code:

　 #content{overflow:hidden;} .left{width:200px; margin-bottom:-3000px; padding-bottom :3000px; background:#cad5eb; float:left;} .right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;} .center{margin:0 410px 0 210px; background:#ffe6b8; height:600px;}

　

Left side, no height attribute, adaptive to the highest one The height of the column

right, no height attribute, adaptive to the height of the highest column

middle, height 600 pixels, the height of the left and right columns is adaptive