為什么要嘗試這種布局方式呢？
因為上中下布局，通常中間的內容會有上下滑動的需求，而通過定位來寫這些滑動時，在ios上會出現滑動問題，比如說，滑動中間的內容，導致把整個網頁拖拽動了，而
中間內容卻沒有拖拽動，還有一些其它的問題，總之是定位引起的的，特別是fixed定位在ios上容易出問題。今天見了一個用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> *{margin:0;padding:0;} .main{ height:100vh; display: flex; flex-direction: column; } .top{ height:200px; background:pink; } .nav{ height:40px; display: flex; justify-content: space-around; align-items: center; background:green; } .content{ flex: 1; display: flex; flex-direction: column; overflow: hidden; background:yellow; } .content .content_top{ flex:1; overflow: scroll; background: #f5f5f5; padding:10px 16px; } .content .content_bottom{ height:60px; background:purple; } </style> </head> <body> <div class="main"> <div class="top">頂部</div> <div class="nav"><span>導航</span><span>導航</span></div> <div class="content"> <div class="content_top"> 主要內容塊,需要上下滑動 </div> <div class="content_bottom"> 底部 </div> </div> </div> </body> </html>
效果：
。