背景：
Html5登錄表單沪哺，但是登錄表單下面有內容是固定在頁面最底部隅俘。這種布局下，當鍵盤彈出輸入時笤喳，ios手機上是沒問題的为居，但是在安卓手機上，鍵盤彈出后杀狡，頁面底部的內容會擋住form表單蒙畴。
效果如下圖：
1070064-20170113194459041-2114149852.jpg
初步解決思路：
①不使用fixed布局，則必然要用到margin等來調整位置呜象，但是這會引起和其他兄弟頁面子頁面的風格不一致膳凝，對此站點內每個頁面進行改動勢必增加了很大的工作量。
②對input輸入框進行監(jiān)控恭陡，一旦獲取焦點就取消掉底部區(qū)域的fixed屬性蹬音，失去焦點就恢復fixed屬性。但是有一個關鍵問題是：文本框獲得焦點未必會彈出鍵盤Ｐ萃妗Ｖ！我們認為會出現(xiàn)或者消失鍵盤的時候都可能不工作Ｋ┌獭Ｓ啦俊！
終極解決辦法：
css sticky footer布局
HTML代碼:
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
</div>
</div>
<div id="footer">
</div>
說明: 使用這個布局的前提呐矾，就是footer要在總的div容器之外苔埋，footer使用一個層，其它所有內容使用一個總的層蜒犯。如果確實需要到添加其它同級層讲坎，那這個同級層就必須使用position:absolute進行絕對定位。
CSS代碼:
下面是主要的CSS代碼愧薛，讓你的底部可以位于窗口的最下面:
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必須使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的負值 */
height: 150px;
clear:both;}
說明: 需要注意的就是#main的padding值晨炕、footer的高度和負margin值，需要保持一致毫炉。
就是這么簡單瓮栗，不過還沒完。如果你的主體是使用懸浮布局瞄勾，還得解決一些瀏覽器的兼容問題费奸，這里使用的重點是為了Goolge Chrome。
對#main部份進行著名的Clearfix Hack:
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
