需求：
需要把導航固定在底部？只能滑動內容，導航選單固定不動的。效果如下：
滾動區域
底部固定選單
方法一：使用fixed
.box
footer
}滾動區域留下底部導航高度的padding距離
底部導航fixed固定定位到底部
設定z-index:999因為底部定位為fixed或absolute的時候，出現優先級別較低，導致被其他div覆蓋的情況，那麼這裡就需要用到z-index，來讓他成為最高端別，不至於被覆蓋。
fixed總是以body為定位時的物件,總是根據瀏覽器的視窗來進行元素的定位.通過left top right bottom 屬性進行定位.
當我們需要使乙個層相對於瀏覽器來自動調整該層的位置的時候如果使用position:absolute來定位該層會發現不能達到想要的css效果.這時候就需要用到fixed屬性來定位該層了.
底部定位為fixed或absolute，存在輸入框的時候，會出現如下情況：
ios：啟用輸入框時，底部不會彈出來（合理）。
android：啟用輸入框時，底部會跟著輸入框彈出來（不合理）
傳統解決辦法：通常將底部設定為fixed，當啟用輸入框的時候，將底部定位改為relative，即可相容ios和android。
方法二：使用absolute
.box
footer
}讓box相對定位 滾動區域和底部導航相對於盒子絕對定位.
overflow-y:scroll 裁剪內容提供滾動機制
設定-webkit-overflow-scrolling 屬性。這樣才能保證滾動區域的流暢性，-webkit-overflow-scrolling控制元素在移動裝置上是否使用滾動回彈效果。底部導航定位在底部.
over-flow-y 屬性規定如果溢位元素內容區域的話是否對內容的上下邊緣進行裁剪
hidden 裁剪內容不提供滾動機制
scroll 裁剪內容提供滾動機制
auto 如果溢位框則應該提供滾動機制
-webkit-overflow-scrolling屬性控制元素在移動裝置上是否使用滾動回彈效果
auto 使用普通滾動當手指從觸控螢幕上移開滾動會立即停止
touch 使用具有回彈效果的滾動當手指從觸控螢幕上移開,內容會繼續保持一段時間的滾動.
注意:在部分瀏覽器中設定overflow-y: scroll;會出現滾動條，這時候我們需要全域性定義如下樣式：
::-webkit-scrollbar
方法三：使用flex
.box
}display:flex彈性布局
flex:1
flex
子元素之間等比例空間分配
子元素所佔剩餘空間分配
flex屬性是以下三個屬性的簡寫
flex-grow:0 定義彈性盒子的拉伸因子即子項分配父項剩餘空間的比預設值為0
flex-shrink:1指定flex元素的收縮規則 子項的收縮所佔的份數預設值為1
flex-basis:auto 指定了flex元素在主軸方向上的初始大小即子項的寬度.
flex-direction 規定靈活專案的方向
row靈活的專案將水平顯示
row-reverse
column靈活的專案將垂直顯示
column-reverse
參考文章：
H5移動端底部固定ios相容
問題 一 之前寫的底部導航欄固定用的是絕對定位 fixed 做的，在安卓是沒問題的，但在ios無法固定住 原因 安卓是相對瀏覽器做的定位，ios是相對滾動條做的定位，這個原因不是很確定啦，表述可能會有問題，看到的小夥伴可以略過啦 解決方法 頁面中不使用絕對定位 fixed 改為頁面100 布局。he...
移動端H5開發之頂部固定導航布局
h5的常規操作是直接來個fixed定位，如下 position fixed top 0 left 0 right 0 但是，這種寫法，在ios系統下，會出現一些，類似下拉頁面時，導航會一起滾動，無法固定在螢幕頂部，或者是有input標籤的時候，調出軟鍵盤之後，頁面無法往上頂，導致標籤被擋住，尤其是在...
移動端底部導航欄固定 相容IOS
問題 移動端前端底部導航欄設計 相容安卓下的各種瀏覽器和ios自帶的safari,但是不相容蘋果下的 釘釘。具體 格式 內容 內容 內容 css樣式 body header content footer 這樣寫下來，在安卓的一系列瀏覽器和釘釘上面是正常的 在ios的一系列瀏覽器上是正常的，但是在釘釘...