解決IOS移動端fixed固定頭部問題

2021-09-17 23:59:02 字數 969 閱讀 1501

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


>


>


121212p


>


>


121212p


>


>


121212p


>


>


121212p


>


>


121212p


>


>


121212p


>


>


121212p


>


>


121212p


>


div>


class


="footer"


>


i am  footer


div>


div>
注意：content區域的flex屬性值為1，由該元素自動填充，page元素內剩下的空間。但頭部，和底部是要固定高度的。另外，最重要的一點是在content元素上設定overflow:auto屬性，即當該區域的內容超出其高度時，由滑動滾動條來瀏覽**。

在ios移動端，盡量不要用fixed實現頭部或底部固定的效果，因為問題比較多，解決方法：

移動web滾動Fixed固定失效探索

最近工作中遇到ios手機頁面頭部fixed定位，隨著頁面的滾動頭部偶爾跟著頁面滾動，當滾動停止頁面頭部恢復原來的位置。此時頁面是body產生的滾動條，猜測可能是頁面滾動，導致定位失效。解決方案就很明顯了，就是定位元素跟滾動容器隔離。怎麼隔離呢？沒錯就是區域滾動，不要讓body產生滾動條。絕對定位方案...

Web移動端Fixed布局的解決方案

移動端業務開發，ios 下經常會有 fixed 元素和輸入框 input 元素 同時存在的情況。但是 fixed 元素在有軟鍵盤喚起的情況下，會出現許多莫名其妙的問題。這篇文章裡就提供乙個簡單的有輸入框情況下的 fixed 布局方案。讓我們先舉個栗子，最直觀的說明一下這個 bug 的現象。常規的 f...

Web移動端Fixed布局的解決方案

移動端業務開發，ios 下經常會有 fixed 元素和輸入框 input 元素 同時存在的情況。但是 fixed 元素在有軟鍵盤喚起的情況下，會出現許多莫名其妙的問題。這篇文章裡就提供乙個簡單的有輸入框情況下的 fixed 布局方案。讓我們先舉個栗子，最直觀的說明一下這個 bug 的現象。常規的 f...