简单实现顶部固定，中部自适应布局
生活随笔
收集整理的這篇文章主要介紹了
简单实现顶部固定，中部自适应布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ? 最近在重構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%顯示全部區域，特別適用于針對右上角有菜單導航的頁面。
?
轉載于:https://www.cnblogs.com/Sroot/p/7636851.html
總結
以上是生活随笔為你收集整理的简单实现顶部固定，中部自适应布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nachos Lab3 同步机制
- 下一篇： 远程桌面无法连接服务器，启动Termin