簡單實現頂部固定，中部自適應布局
阿新 • • 發佈：2017-10-08
col position fix enter span text auto pos otto
最近在重構web導航的時候就發現一個問題，如何實現頂部固定，中部自適應的布局。
很多人會認為這很簡單啊，頂部使用position: fixed;就可以實現。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>頂部固定，中部自適應</title> <style type="text/css"> * { margin: 0; padding: 0; } .hd { position: fixed; z-index: 99; top: 0; width: 100%; height: 20px; padding: 15px 0; text-align: center; color: #fff; background: #f00; } .bd{ width: 100%; margin-top: 50px; padding: 15px 0; text-align: center; color: #fff; background: #00f; } </style> </head> <body> <header class="hd"> 我是固定頭部 </header> <div class="bd"> 我是中部部分 <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> </div> </body> </html>
這種做法確實簡單，但是，請看清題目，頂部固定，中部自適應。（頂部不包括滾動條）
花了一點時間的思考，終於想出來了，中部使用position:absolute;就可以實現。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>頂部固定，中部自適應</title> <style type="text/css"> * { margin: 0; padding: 0; } .hd { width: 100%; height: 50px; padding: 15px 0; text-align: center; color: #fff; background: #f00; } .bd { position: absolute; top: 50px; /* 往下移頂部的距離 */ bottom: 0; /* 底部貼邊 */ overflow: auto; /* 溢出的部分自適應 */ /* 不設置高度 */ width: 100%; padding: 15px 0; text-align: center; color: #fff; background: #00f; } </style> </head> <body> <header class="hd"> 我是固定頭部 </header> <div class="bd"> 我是中部部分 <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> <p>超出的部分滾動</p> </div> </body> </html>
PS：這種做法的好處是不占頂部寬度，頂部100%顯示全部區域，特別適用於針對右上角有菜單導航的頁面。
簡單實現頂部固定，中部自適應布局