一、 float+ margin 經典模式，兼容性好
原理：使用padding+margin擴大內容，使用 hidden隱藏超出部分。
注：垂直方向無法居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; } .wrap { /* width: 100%; height: 100%; */ overflow: hidden; } .row { margin-bottom: -10000px; padding-bottom: 10000px; /*內外補丁是關鍵*/ } .left { width: 200px; background: red; float: left; } .center { background: green; overflow: hidden; } .clear { clear: both; } button { display: block; } </style> </head> <body> <div class="wrap"> <div class="left row"> <button>左側按鈕</button> <button>左側按鈕</button> <button>左側按鈕</button> <button>左側按鈕</button> <button>左側按鈕</button> <button>左側按鈕</button> <button>左側按鈕</button> <button>左側按鈕</button> <button>左側按鈕</button> <button>左側按鈕</button> </div> <div class="center row"> <P>中間內容高度不一定</P> <P>中間內容高度不一定</P> <P>中間內容高度不一定</P> </div> <div class="clear"></div> </div> </body> </html>
顯示效果：
二、table | table class 方式
1.table 布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; } .table { width: 100%; /* height: 100%; */ border-collapse: collapse; color: white; } .left { background: red; } .right { background: blue; } </style> </head> <body> <table class="table" border="0"> <tr> <td class="left"> 左側內容 </td> <td class="right"> <p>右側內容</p> <p>右側內容</p> <p>右側內容</p> <p>右側內容</p> </td> </tr> </table> </body> </html>
2. table class 布局 （推薦）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; } .table { width: 100%; /* height: 100%; */ border-collapse: collapse; color: white; display: table; } .table .row { display: table-row; } .table .col { display: table-cell; } .left { background: red; vertical-align: middle; text-align: center; } .center { background: blue; } </style> </head> <body> <div class="table"> <div class="row"> <div class="col left"> 左側內容 </div> <div class="col center"> <p>中間內容高度不固定</p> <p>中間內容高度不固定</p> <p>中間內容高度不固定</p> </div> </div> </div> </body> </html>
三、flex 布局 （推薦）
代碼量最少，不考慮兼容情況下，推薦使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; } .flex { display: flex; width: 100%; /* height: 100%; */ color: white; } .left { background: red; width: 200px; } .center { background: blue; width: 100%; } </style> </head> <body> <div class="flex"> <div class="left"> 左側內容 </div> <div class="center flex-item"> <p>中間內容高度不固定</p> <p>中間內容高度不固定</p> <p>中間內容高度不固定</p> <p>中間內容高度不固定</p> </div> </div> </body> </html>
顯示效果：
四、absolute 、fixed + scroll 定位 （推薦）
此方式主要針對頁面整體布局，常用方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, html { padding: 0px; margin: 0px; width: 100%; height: 100%; } .wrap { color: white; width: 100%; height: 100%; } .left { width: 200px; height: 100%; display: fixed; background: red; left: 0px; top: 0px; float: left; } .center { background: blue; margin-left: 200px; height: 100%; } </style> </head> <body> <div class="wrap"> <div class="left"> 左側導航 </div> <div class="center"> 中間內容高度不固定<br> 中間內容高度不固定<br> 中間內容高度不固定<br> 中間內容高度不固定<br> </div> </div> </body> </html>
更多：