???????????￡?
<style>
header?? footer?? main {
display: block;
}
header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
/* main??λ????????????? */
position: absolute;
top: 50px;
bottom: 34px;
/* ????????? */
overflow-y: scroll;
}
main .content {
height: 2000px;
}
/* ??????????????????????????????????????????????????????????????????????main???????′????ɡ? */
main {
/* main??λ????????????? */
position: absolute;
top: 50px;
bottom: 34px;
/* ????????? */
overflow-y: scroll;
/* ????????????????????? */
-webkit-overflow-scrolling: touch;
}
</style>
<body class="layout-scroll-fixed">
<!-- fixed??λ????? -->
<header>
</header>
<!-- ????????????? -->
<main>
<div class="content">
<!-- ??????????... -->
</div>
</main>
<!-- fixed??λ???? -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">??</button>
</footer>
</body>
????????ο????????DEMO
??????????????absolute??????fixedЧ???????????????????????????????????????????????????
????· JS?????????????????
??????js???focus????????????仯?????????????????????????????????????????????????????????к??
????· iscroll.js
???????????????????￡??????????????2???????????????????????????????????????