Do some background projects, and a side bar project when the Ascend layout is very common, summed up the following several
1.margin-bottom method
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;
You can then match the properties of the parent tag to overflow:hidden 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 highest column height </div> <div class= "right" > right, no height attribute, adaptive to the highest column height </div> <div class= "center" > middle, Height 600 pixels, height of left two columns and adaptive </div></div >
Follow up and slowly summarize the more practical several
Reference: Http://www.w3cplus.com/css/creaet-equal-height-columns
Http://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width
CSS and other high layout