Pure CSS Cashing Sidebar/column height auto equal (GO)

Here is a direct introduction to what I think is the best auto-equality method for Sidebar/column height. The core CSS code is as follows (values are not fixed):

margin-bottom:-3000px; padding-bottom:3000px;

With the Overflow:hidden property of the parent tag, you can achieve a highly automatic equality effect.

To 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;}

<div id= "Content" > <div class= "Left" > Ieft, no height attribute, adaptive to height of highest column </div> <div class= "Right" > to, no height attribute , adaptive to the height of the highest column </div> <div class= "Center" > Center, Height 600 pixels, height of left and right two columns with adaptive </div> </div>

Pure CSS Cashing Sidebar/column height auto equal (GO)