首页 HTML5移动端正文

移动端布局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处理了,方便运行代码。

<!DOCTYPE html>

<html lang="zh_cmn">

<head>

<meta charset=utf-8 />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
    />

<title>flex</title>

<style lang="">
* {
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;
}
</style>

</head>

<body>
<div class="wrap">
<div class="page-header-bg"></div>
<div class="banner"></div>
<div class="section">
<div>

<p>当内容欲出隐藏时,灰色区域可上下拖动</p>

<p>当内容欲出隐藏时,灰色区域可上下拖动</p>

<p>当内容欲出隐藏时,灰色区域可上下拖动</p>

<p>当内容欲出隐藏时,灰色区域可上下拖动</p>

<p>当内容欲出隐藏时,灰色区域可上下拖动</p>

<p>当内容欲出隐藏时,灰色区域可上下拖动</p>

<p>当内容欲出隐藏时,灰色区域可上下拖动</p>

<p>当内容欲出隐藏时,灰色区域可上下拖动</p>

<p>当内容欲出隐藏时,灰色区域可上下拖动</p>

<p>当内容欲出隐藏时,灰色区域可上下拖动</p>

<p>当内容欲出隐藏时,灰色区域可上下拖动</p>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br>

<input type="text" value="" class="inputtext">
<br> content
<br> content
<br> content
<br> content
<br> content
<br> content
<br> content
<br> content
<br> content
<br>

</div>
</div>
</div>

</body>

</html>


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的布局这是最基本的案例,详情使用参考这里

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论