Method One: Through the parent Overflow:hidden, you set Padding-bottom and Margin-bottom to achieve.
1 #wrap{2 Overflow:Hidden;3 width:1000px;4 margin:0 Auto;5}6 #left, #center{7 Margin-bottom:-10000px;8 Padding-bottom:10000px;9}Ten #left{ One float: Left; A width:250px; - background:#00FFFF; -} the #center{ - float: Left; - width:500px; - background:#FF0000; +}
Reference link: pure css to achieve div around equal height
Method Two: Use Table-cell
1 <! DOCTYPE html>2 3 4 <meta charset= "Utf-8" >5 <title></title>6 <style>7 . Left,8 . Right{9 padding:10px;Ten Display:Table-cell; One Border:1px solid #f40; A} - </style> - the <body> - <div class= "wrap" > - <div class= "left" > - Left Div + <br/> - <br/> + <br/> A <br/> at <br/> - </div> - <div class= "right" >right div</div> - </div> - </body> -
Reference link: pure css to achieve div around equal height
Method Three: Using the CSS3 box model
1 <! DOCTYPE html>2 3 4 <meta charset= "Utf-8" >5 <title></title>6 <style>7 . Wrap{8 Display:-webkit-box;9}Ten . Left, One . Right{ A padding:10px; - Border:1px solid #f40; -} the </style> - - <body> - <div class= "wrap" > + <div class= "left" > - Left Div + <br/> A <br/> at <br/> - <br/> - <br/> - </div> - <div class= "right" >right div</div> - </div> in </body> -
Reference link: pure css to achieve div around equal height
CSS to achieve the left and right div high, while the parent Div is the highest sub-div height.