參考過網(wǎng)上一些解決定位失效的案例，都沒有完美的解決現(xiàn)在的需求
- 目前需求要求如下
使用傳統(tǒng)定位布局自晰，內(nèi)容中含有表單题翻，在移動端input會觸發(fā)軟鍵盤彈出排宰，這時滑動頁面會發(fā)現(xiàn)頭部和尾部沒有固定住褐鸥，而是隨著頁面移動线脚，也就是相當于轉(zhuǎn)化瑋absolute。
<!--- 頭部固定-->
div id="header">iScroll</div>
<!--內(nèi)容滾動-->
<div id="wrapper">
<div id="scroller">
<ul>
<li><input type="text"></li>
<li><select><option>option</option></select></li>
</ul>
</div>
</div>
<!--底部固定-->
<div id="footer"></div>
//css
header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
margin-top: 50px;
margin-bottom: 34px;
height: 2000px
}
- 解決方案一
采用內(nèi)容部分absolute晶疼，固定高度加scroll酒贬，如果僅是一個頭部需要處理的話，這個方案是簡單有效的
header{
width:100%;
height:40px;
background:red;
}
.contain{
position:absolute;
top:40px;
left:0;
right:0;
bottom:50px;
background:pink;
overflow-y:auto;
/* 增加該屬性翠霍，可以增加彈性 */
-webkit-overflow-scrolling: touch;
}
.main{
height:3000px;
}
footer{
width: 100%;
height: 50px;
background: #ccc;
position: absolute;
bottom: 0px;
}
有時候輸入框 focus 以后，會出現(xiàn)軟鍵盤遮擋輸入框的情況蠢莺，這時候可以嘗試 input 元素的 scrollIntoView 進行修復(fù)寒匙。
其他方法還在整理中，目前被多個input框來回切換時頭部亂跳困擾躏将，還在排查原因中锄弱。。祸憋。
