移動端業務開發，ios 下經常會有fixed元素和輸入框(input元素)同時存在的情況。 但是fixed元素在有軟鍵盤喚起的情況下，會出現許多莫名其妙的問題。 這篇文章裡就提供乙個簡單的有輸入框情況下的fixed布局方案。
讓我們先舉個栗子，最直觀的說明一下這個 bug 的現象。 常規的fixed布局，可能使用如下布局（以下僅示意**）：
對應的樣式如下：
header, footer, main
header
footer
main
然後看起來就是下面這個樣子。拖動頁面時header和footer已經定位在了對應的位置，目測沒問題了。
但接下來問題就來了！如果底部輸入框軟鍵盤被喚起以後，再次滑動頁面，就會看到如下圖所示：
我們看到fixed定位好的元素跟隨頁面滾動了起來…fixed屬性失效了！
這是為什麼呢？簡單解釋下： ** 軟鍵盤喚起後，頁面的fixed元素將失效（即無法浮動，也可以理解為變成了absolute定位），所以當頁面超過一屏且滾動時，失效的fixed元素就會跟隨滾動了**。
這便是 ios 上fixed元素和輸入框的 bug 。其中不僅限於type=text的輸入框，凡是軟鍵盤（比如時間日期選擇、select 選擇等等）被喚起，都會遇到同樣地問題。
雖然isscroll.js可以很好的解決fixed定位滾動的問題，但是不在萬不得已的情況下，我們盡量嘗試一下不依賴第三方庫的布局方案，以簡化實現方式。這裡拋磚引玉作為參考。
既然在 ios 下由於軟鍵盤喚出後，頁面fixed元素會失效，導致跟隨頁面一起滾動，那麼假如——頁面不會過長出現滾動，那麼即便fixed元素失效，也無法跟隨頁面滾動，也就不會出現上面的問題了。
那麼按照這個思路，如果使fixed元素的父級不出現滾動，而將原body滾動的區域域移到main內部，而header和footer的樣式不變，**如下：
css:
header, footer, main
header
footer
main
main .content
這樣再來看一下：
在原始輸入法下，fixed元素可以定位在頁面的正確位置。滾動頁面時，由於滾動的是main內部的div，因此footer沒有跟隨頁面滾動。
上面貌似解決了問題，但是如果在手機上實際測試一下，會發現main元素內的滾動非常不流暢，滑動的手指鬆開後，滾動立刻停止，失去了原本的流暢滾動特性。百度一下彈性滾動的問題，發現在webkit中，下面的屬性可以恢復彈性滾動。
-webkit-overflow-scrolling: touch;在main元素上加上該屬性，嗯，絲般順滑的感覺又回來了！
main 另外，這裡的header和footer使用的是fixed定位，如果考慮到更老一些的 ios 系統不支援fixed元素，完全可以把fixed替換成absolute。測試後效果是一樣的。
至此乙個不依賴第三方庫的fixed布局就完成了。
談到了 ios ，也來簡單說一下 android 下的布局吧。
在 android2.3+ 中，因為不支援overflow-scrolling，因此部分瀏覽器內滾動會有不流暢的卡頓。但是目前發現在body上的滾動還是很流暢的，因此使用第一種在 ios 出現問題的fixed定位的布局就可以了。
如果需要考慮 android2.3 以下系統，因為不支援fixed元素，所以依然要需要考慮使用isscroll.js來實現內部滾動。
其實在fixed和輸入框的問題上，基本思路就是： 由於fixed在軟鍵盤喚起後會失效，導致在頁面可以滾動時，會跟隨頁面一起滾動。因此如果頁面無法滾動，那麼 fixed 元素即使失效，也不會滾動，也就不會出現 bug 了。
所以可以在這個方面去考慮解決問題。
其他的一些細節處理
在細節處理上，其實還有很多要注意的，挑幾個實際遇到比較大的問題來說一下：
Web移動端Fixed布局的解決方案
移動端業務開發，ios 下經常會有 fixed 元素和輸入框 input 元素 同時存在的情況。但是 fixed 元素在有軟鍵盤喚起的情況下，會出現許多莫名其妙的問題。這篇文章裡就提供乙個簡單的有輸入框情況下的 fixed 布局方案。讓我們先舉個栗子，最直觀的說明一下這個 bug 的現象。常規的 f...
Web移動端Fixed布局的解決方案
移動端業務開發，ios 下經常會有 fixed 元素和輸入框 input 元素 同時存在的情況。但是 fixed 元素在有軟鍵盤喚起的情況下，會出現許多莫名其妙的問題。這篇文章裡就提供乙個簡單的有輸入框情況下的 fixed 布局方案。讓我們先舉個栗子，最直觀的說明一下這個 bug 的現象。常規的 f...
Web移動端Fixed布局的解決方案
移動端業務開發，ios 下經常會有 fixed 元素和輸入框 input 元素 同時存在的情況。但是 fixed 元素在有軟鍵盤喚起的情況下，會出現許多莫名其妙的問題。這篇文章裡就提供乙個簡單的有輸入框情況下的 fixed 布局方案。讓我們先舉個栗子，最直觀的說明一下這個 bug 的現象。常規的 f...