Original address: https://www.cnblogs.com/cbza/p/7145384.html
Method One: Through the parent Overflow:hidden, you set Padding-bottom and Margin-bottom to achieve.(Method One pro-test effective)
#wrap{Overflow:Hidden;width:1000px;margin:0 Auto;}#left, #center{Margin-bottom:-10000px;Padding-bottom:10000px;}#left{float: Left;width:250px;background:#00FFFF; }#center{float: Left;width:500px;background:#FF0000; }
<p> Reference Links: <a href= "http://yanue.net/post-35.html" target= "_blank" > Pure CSS Implementation div around equal height </a></p>
Method Two: Use Table-cell
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title></title> <style>. Left,. Right{padding:10px;Display:Table-cell;Border:1px solid #f40; } </style></Head><Body><Divclass= "Wrap"> <Divclass= "Left">Left Div<BR/> <BR/> <BR/> <BR/> <BR/> </Div> <Divclass= "Right">Right Div</Div></Div></Body></HTML>
<p> Reference Links: <a href= "http://blog.csdn.net/qinshenxue/article/details/44861695" target= "_blank" > Pure CSS Implementation div around equal height </a> </p>
Method Three: Using the CSS3 box model
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title></title> <style>. Wrap{Display:-webkit-box; }. Left,. Right{padding:10px;Border:1px solid #f40; } </style></Head><Body><Divclass= "Wrap"> <Divclass= "Left">Left Div<BR/> <BR/> <BR/> <BR/> <BR/> </Div> <Divclass= "Right">Right Div</Div></Div></Body></HTML>
<p> Reference Links: <a href= "http://blog.csdn.net/qinshenxue/article/details/44861695" target= "_blank" > Pure CSS Implementation div around equal height </a></p>
CSS to achieve the left and right div high, while the parent Div is the highest sub-div height