css fix 手机端,移动端布局fixed问题解决方案

今天测试忽然提了一个bug，关于position:fixed的问题，一般情况下使用并没问题，当页面出现表单时，由于弹出键盘，整个页面会出现布局错位问题，或者含有fixed的模块会空白(ios11比较明显)，经过几个小时的各种尝试，最后不得不放弃fixed的布局，重新采用flex布局，另外补充一句在移动端布局的时候能不用浮动尽量别用。

项目用的是sass,为了考虑兼容性，特意整理了一份flex的功能函数模块/*

* =========================================================

* @ filename : flex.scss

* @ explains : flex layout mixin; 目前支持flex,未做inline-flex

* ==========================================================

*/

// ----------------------------------

// 定义伸缩布局

@mixin display-flex() {

display: -webkit-box;   /* old version iOS 6- Safari 3.1-6 */

display: -moz-box;      /* Firefox 19- */

display: -ms-flexbox;   /* IE10 */

display: -webkit-flex;  /* Chrome */

display: flex;          /* New version */

}

@mixin flex-direction($value: row) {

@if $value == 'row' {

-webkit-box-orient: horizontal;

-moz-box-orient: horizontal;

-ms-flex-direction: row;

-webkit-flex-direction: row;

flex-direction: row;

} @else if $value == 'column' {

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

-ms-flex-direction: column;

-webkit-flex-direction: column;

flex-direction: column;

}

}

@mixin justify-content($value: center) {

@if $value == 'center' {

-webkit-box-pack: center;

-moz-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

} @else if $value == 'space-between' {

-webkit-box-pack: justify;

-moz-box-pack: justify;

-ms-flex-pack: justify;

-webkit-justify-content: space-between;

justify-content: space-between;

}

}

// ----------------------------------

// 侧轴对齐方式 支持三版本通用属性为 center, baseline, stretch

@mixin align-items($align-items: center) {

-webkit-box-align: $align-items;

-moz-box-align: $align-items;

-ms-flex-align: $align-items;

-webkit-align-items: $align-items;

align-items: $align-items;

}

// ----------------------------------

// 设置子元素的显示顺序

@mixin order($order) {

-webkit-box-ordinal-group: $order;

-moz-box-ordinal-group: $order;

-ms-flex-order: $order;

-webkit-order: $order;

order: $order;

}

// ----------------------------------

// 伸缩项目的伸缩比例

@mixin flex($flex) {

-webkit-box-flex: 1;

-moz-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

}

// 多行

@mixin flex-wrap($value: wrap) {

@if $value == 'wrap' {

-webkit-box-lines: multiple;

-moz-box-lines: multiple;

-ms-flex-wrap: wrap;

-webkit-flex-wrap: wrap;

flex-wrap: wrap;

} @else if $value == 'nowrap' {

-webkit-box-lines: single;

-moz-box-lines: single;

-ms-flex-wrap: nowrap;

-webkit-flex-wrap: nowrap;

flex-wrap: nowrap;

}

}

@mixin justify-space-between() {

-webkit-box-pack: justify;

-moz-box-pack: justify;

-ms-flex-pack: justify;

-webkit-justify-content: space-between;

justify-content: space-between;

}

重构布局

这里用行内css处理了，方便运行代码。html>

/>

flex

* {

margin: 0;

padding: 0;

list-style: none;

}

html,

body {

height: 100%;

overflow: hidden;

}

.wrap {

height: 100%;

display: flex;

flex-direction: column;

}

.wrap .page-header-bg {

background: #000;

width: 100%;

height: 130px;

background-size: cover;

z-index: 999;

}

.banner {

width: 100%;

height: 130px;

background: #f60;

}

.wrap .section {

flex: 1;

overflow: auto;

-webkit-overflow-scrolling: touch;

}

input {

border: 1px solid #f60;

}

当内容欲出隐藏时，灰色区域可上下拖动

当内容欲出隐藏时，灰色区域可上下拖动

当内容欲出隐藏时，灰色区域可上下拖动

当内容欲出隐藏时，灰色区域可上下拖动

当内容欲出隐藏时，灰色区域可上下拖动

当内容欲出隐藏时，灰色区域可上下拖动

当内容欲出隐藏时，灰色区域可上下拖动

当内容欲出隐藏时，灰色区域可上下拖动

当内容欲出隐藏时，灰色区域可上下拖动

当内容欲出隐藏时，灰色区域可上下拖动

当内容欲出隐藏时，灰色区域可上下拖动

 content

 content

 content

 content

 content

 content

 content

 content

 content

sass处理兼容//根标签

.warp{

@include display-flex();

@include flex-direction(column);

}

header{

height:50px;

}

.banner{

height:100px;

}

//滚动区域

section{

@include flex(1);

overflow: auto;

-webkit-overflow-scrolling: touch;

}

关于flex的布局这是最基本的案例，详情使用参考这里