最近工作中遇到ios手機頁面頭部fixed定位，隨著頁面的滾動頭部偶爾跟著頁面滾動，當滾動停止頁面頭部恢復原來的位置。
此時頁面是body產生的滾動條，猜測可能是頁面滾動，導致定位失效。解決方案就很明顯了，就是定位元素跟滾動容器隔離。怎麼隔離呢？沒錯就是區域滾動，不要讓body產生滾動條。
絕對定位方案
頁面頭部、內容、底部通過絕對定位固定，內容區域產生滾動條。 缺點是需要通過計算確定內容區域的位置；頁面固定頭部布局調整時，需要重新計算高度。
縱向flex布局
首先讓外容器100%填充螢幕，最外圍包裹容器flex布局、方向flex-direction: column。
內容區域flex: 1彈性伸縮。
優點是不用計算頭部、底部的高度，計算相對簡單些；適應頁面布局調整。
html 結構
...
"flex">
"header" id="header">
"placeholder">
"main" id="main">
..."footer">
底部...
複製**
.flex
.header
.main
.footer
複製**
解決IOS移動端fixed固定頭部問題
css部分 html,body page page header page content page footer html部分 class page class header i am header div class content i am content 121212p 121212p 12...
Web移動端Fixed布局的解決方案
移動端業務開發，ios 下經常會有 fixed 元素和輸入框 input 元素 同時存在的情況。但是 fixed 元素在有軟鍵盤喚起的情況下，會出現許多莫名其妙的問題。這篇文章裡就提供乙個簡單的有輸入框情況下的 fixed 布局方案。讓我們先舉個栗子，最直觀的說明一下這個 bug 的現象。常規的 f...
Web移動端Fixed布局的解決方案
移動端業務開發，ios 下經常會有 fixed 元素和輸入框 input 元素 同時存在的情況。但是 fixed 元素在有軟鍵盤喚起的情況下，會出現許多莫名其妙的問題。這篇文章裡就提供乙個簡單的有輸入框情況下的 fixed 布局方案。讓我們先舉個栗子，最直觀的說明一下這個 bug 的現象。常規的 f...