android仿ios弹性布局,移动开发中固定布局

记录一下移动开发过程中出现的问题。

从最常见的布局说起，固定头部或底部算是最常见的需求了

假定页面布局如下：

实现头部、底部固定，中间滚动，有三种简单实现方式：

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更佳。