移动开发中固定布局
记录一下移动开发过程中出现的问题。
从最常见的布局说起，固定头部或底部算是最常见的需求了
假定页面布局如下：
<body>
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</body>实现头部、底部固定，中间滚动，有三种简单实现方式：
- fixed布局
- absolute布局
- flex布局
先从最简单的fixed布局开始，实现方式如下：
html, body {
overflow: hidden;
height: 100%;
}
.header, .footer {
position: fixed;
left: 0;
height: 50px;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.main {
height: 100%;
padding: 50px 0;
}这种布局在大多数情况下是正常显示的，但在移动端上（iOS）position: fixed失效，会有所谓的兼容性问题；
第二种方式absolute实现如下：
html, body {
position: relative;
height: 100%;
}
.header, .footer {
position: absolute;
left: 0;
width: 100%;
height: 50px;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.main {
height: 100%;
width: 100%;
padding: 50px 0;
overflow: auto;
}这种方式在移动端（iOS）上能准确布局
第三种方式flex布局如下：
body {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
height: 50px;
}
.main {
flex: 1;
overflow: auto;
-webkit-overflow-scrolling: touch; /*ios滚动流畅*/
}flex 定位在移动端兼容到了 iOS 7.1+，Android 4.4+,在iOS3.2~ios6.0可兼容flexbox，如果使用 autoprefixer 等工具还可以降级为旧版本的 flexbox ，可以兼容到 iOS 3.2 和 Android 2.1。
若是涉及到移动开发布局中碰到固定某一部分，其余部分可滚动，尽量不要使用position: fixed,可用absolute替代，若是不需要考虑兼容性，用flex更佳。
相关推荐
PncLogon 2020-09-24
wwzaqw 2020-09-04
csdnuuu 2020-04-18
xilove0 2020-02-11
ShylaDong 2020-01-04
福叔 2019-12-24
haohong 2019-12-19
huanghuang 2014-04-11
yxwang0 2014-01-09
qixiang0 2019-08-24
shangbolei 2015-01-16
lanyanai 2015-01-13
朱莉的乔夫 2015-03-13
木鲸鱼 2016-01-14
zZoOoOJaVa 2015-07-16
starleejay 2015-10-26