方法一：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>new document</title> <style type="text/css"> .wrap{ border:1px solid #006699; width:500px; overflow:hidden; } .wrap .left{ float:left; width:50%; background:#eee; padding-bottom:3000px; margin-bottom:-3000px; } .wrap .right{ float:right; width:50%; background:#f5f6fb; padding-bottom:3000px; margin-bottom:-3000px; } </style> </head> <body> <div class="wrap"> <div class="left"> <p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p> </div> <div class="right"> sfds <p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p> <p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p> </div> </div> </body> </html>
方法二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #main{width:300px;position:relative;} #div1{width:140px;border-right:1px solid #ccc;} #div2{width:140px;border:1px solid #ccc;height:100%;right:0px;top:0px;position:absolute;} </style> </head> <body> <div id="main"> <div id="div1">111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>222<br/>222<br/>222<br/>222</div> <div id="div2">2222</div> </div> </body> </html>
方法三：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #main{width:220px;height:300px;border:1px solid black;display:flex;} #main div{flex:1;} </style> </head> <body> <div id="main"> <div style="background-color:coral;">红色</div> <div style="background-color:lightblue;">蓝色</div> <div style="background-color:lightgreen;">带有更多内容的绿色 div</div> </div> <p><b>注意：</b>Safari 不支持 flex 属性。</p> </body> </html>