使用Flex 彈性佈局來實現手機端頂部，底部固定，中間滑動效果
阿新 • • 發佈：2018-11-26
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style type="text/css"> *{padding:0;margin:0;} html{ font-size:14px; width:100%; height:100%; -webkit-font-smoothing:antialiased; } body{ user-select:none; width:100%; height:100%; -webkit-text-size-adjust:none; } .page{ display:-webkit-box; -webkit-box-orient:vertical; height:100%; } .header{ box-shadow:0px 1px 15px #ccc; } .header nav{ width:100%; display:-webkit-box; display:flex; overflow-y:scroll; white-space:nowrap; } .header nav *{ flex:1; -webkit-flex:1; -webkit-box-flex:1; padding:10px 15px; } .page .content{ padding:15px; position:relative; -webkit-box-flex:1; -webkit-flex:1; flex:1; overflow:auto; -webkit-overflow-scrolling:touch; } .page .content *{ margin-bottom:10px; } .footer{ overflow:hidden; background:#fff; box-shadow:0px 1px 15px #ccc; } .foot-nav{ text-align:center; display:-webkit-box; display:flex; } .foot-nav *{ display:block; -webkit-box-flex:1; -webkit-flex:1; flex:1; padding:15px 0; } </style> </head> <body> <div class="page"> <header class="header"> <nav> <span>推薦</span> <span>北京</span> <span>軍事</span> <span>小說</span> <span>汽車</span> <span>公眾號</span> <span>美圖</span> </nav> </header> <div class="content"> <div> 頭部和底部是被子元素撐開的，也可根據實際情況指定相應的高度，底部的button是平均分佈排列的（再新增幾個也是），不用計算margin、padding以及position等，彈性佈局很方便。 再來個彈出層，一個基於頭尾部固定的彈出層頁面就實現了：</div> <div> 頭部和底部是被子元素撐開的，也可根據實際情況指定相應的高度，底部的button是平均分佈排列的（再新增幾個也是），不用計算margin、padding以及position等，彈性佈局很方便。 再來個彈出層，一個基於頭尾部固定的彈出層頁面就實現了：</div> <div> 頭部和底部是被子元素撐開的，也可根據實際情況指定相應的高度，底部的button是平均分佈排列的（再新增幾個也是），不用計算margin、padding以及position等，彈性佈局很方便。 再來個彈出層，一個基於頭尾部固定的彈出層頁面就實現了：</div> <div> 頭部和底部是被子元素撐開的，也可根據實際情況指定相應的高度，底部的button是平均分佈排列的（再新增幾個也是），不用計算margin、padding以及position等，彈性佈局很方便。 再來個彈出層，一個基於頭尾部固定的彈出層頁面就實現了：</div> <div> 頭部和底部是被子元素撐開的，也可根據實際情況指定相應的高度，底部的button是平均分佈排列的（再新增幾個也是），不用計算margin、padding以及position等，彈性佈局很方便。 再來個彈出層，一個基於頭尾部固定的彈出層頁面就實現了：</div> <div> 頭部和底部是被子元素撐開的，也可根據實際情況指定相應的高度，底部的button是平均分佈排列的（再新增幾個也是），不用計算margin、padding以及position等，彈性佈局很方便。 再來個彈出層，一個基於頭尾部固定的彈出層頁面就實現了：</div> <div> 頭部和底部是被子元素撐開的，也可根據實際情況指定相應的高度，底部的button是平均分佈排列的（再新增幾個也是），不用計算margin、padding以及position等，彈性佈局很方便。 再來個彈出層，一個基於頭尾部固定的彈出層頁面就實現了：</div> <div> 頭部和底部是被子元素撐開的，也可根據實際情況指定相應的高度，底部的button是平均分佈排列的（再新增幾個也是），不用計算margin、padding以及position等，彈性佈局很方便。 再來個彈出層，一個基於頭尾部固定的彈出層頁面就實現了：</div> <div> 頭部和底部是被子元素撐開的，也可根據實際情況指定相應的高度，底部的button是平均分佈排列的（再新增幾個也是），不用計算margin、padding以及position等，彈性佈局很方便。 再來個彈出層，一個基於頭尾部固定的彈出層頁面就實現了：</div> <div> 頭部和底部是被子元素撐開的，也可根據實際情況指定相應的高度，底部的button是平均分佈排列的（再新增幾個也是），不用計算margin、padding以及position等，彈性佈局很方便。 再來個彈出層，一個基於頭尾部固定的彈出層頁面就實現了：</div> <div> 頭部和底部是被子元素撐開的，也可根據實際情況指定相應的高度，底部的button是平均分佈排列的（再新增幾個也是），不用計算margin、padding以及position等，彈性佈局很方便。 再來個彈出層，一個基於頭尾部固定的彈出層頁面就實現了：</div> <div> 頭部和底部是被子元素撐開的，也可根據實際情況指定相應的高度，底部的button是平均分佈排列的（再新增幾個也是），不用計算margin、padding以及position等，彈性佈局很方便。 再來個彈出層，一個基於頭尾部固定的彈出層頁面就實現了：</div> </div> <footer class="footer"> <nav class="foot-nav"> <span>首頁</span> <span>視訊</span> <span>個人</span> </nav> </footer> </div> </body> </html>
效果：
