相信不少人做移动端项目的时候都会遇到position:fixed 的坑。

下面提供一个解决方法，不用引入任何其他的js库，纯css解决。

解决问题的关键就是：fixed元素内部必须嵌套一个position:absolute元素，用来装载内容，目的就是为了让内容脱离fixed文档流，屏蔽一些fixed的坑

html部分

<!DOCTYPE html>

<html lang="zh_cmn">

<head>

<meta name="description" content="CSS position:flex in mobile" />

<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>CSS position:flex in mobile</title>

</head>

<body>

  <header>

    <div class="fixed">

      <div class="wrap float">

        <div class="left-icon">

          <span class="glyphicon glyphicon-chevron-left"></span>

        </div>

        <h1>HEADER</h1>

        <div class="right-icon">

          <span class="glyphicon glyphicon-calendar"></span><span class="glyphicon glyphicon-list"></span>

        </div>

      </div>

    </div>

  </header>

  <div class="main">

    -------------- start --------------<br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    --------------- end ---------------

  </div>

  <footer>

    <div class="fixed">

      <div class="wrap flex">

        <a href="#"><span class="glyphicon glyphicon-picture"></span></a>

        <a href="#"><span class="glyphicon glyphicon-film"></span></a>

        <a href="#"><span class="glyphicon glyphicon-qrcode"></span></a>

      </div>

    </div>

  </footer>

</body>

</html>

Css部分（Less）

@height: 50px;

@icon-font-path: 'http://cdn.bootcss.com/bootstrap/3.2.0/fonts/';

@icon-font-name: 'glyphicons-halflings-regular';

@font-face {

  font-family: 'Glyphicons Halflings';

  src: url('@{icon-font-path}@{icon-font-name}.eot');

  src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),

       url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),

       url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),

       url('@{icon-font-path}@{icon-font-name}.svg#glyphicons_halflingsregular') format('svg');

}

.glyphicon {

  font-family: 'Glyphicons Halflings';

  font-size: 24px;

  font-style: normal;

  font-weight: normal;

  line-height: 1;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

.glyphicon-film:before {

  content: "\e009";

}

.glyphicon-qrcode:before {

  content: "\e039";

}

.glyphicon-list:before {

  content: "\e056";

}

.glyphicon-picture:before {

  content: "\e060";

}

.glyphicon-chevron-left:before {

  content: "\e079";

}

.glyphicon-calendar:before {

  content: "\e109";

}

.clearfix() {

  &:before,

  &:after {

    content: " "; /* 1 */

    display: table; /* 2 */

  }

  &:after {

    clear: both;

  }

}

* {

  margin: 0;

  padding: 0;

  font-size: 16px;

}

a {

  color: #fff;

}

header, footer {

  width: 100%;

  height: @height;

  .fixed {

    position: fixed;

    left: 0;

    width: 100%;

    height: @height;

    .wrap {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      &.float {

        h1 {

          position: absolute;

          top: 0;

          left: 0;

          width: 100%;

          font-size: 20px;

          line-height: @height;

          color: #fff;

          text-align: center;

        }

        .glyphicon {

          display: inline-block;

          margin: 12px 10px;

          color: #fff;

        }

        .left-icon {

          float: left;

        }

        .right-icon {

          float: right;

        }

        .clearfix();

      }

      &.flex {

        display: -moz-box;

        display: -webkit-box;

        display: -webkit-flex;

        display: -moz-flex;

        display: -ms-flexbox;

        display: -ms-flex;

        display: flex;

        >a {

          -webkit-box-sizing: border-box;

          -moz-box-sizing: border-box;

          box-sizing: border-box;

          display: block;

          -webkit-box-flex: 1;

          -moz-box-flex: 1;

          -webkit-flex: 1 1 0;

          -moz-flex: 1 1 0;

          -ms-flex: 1 1 0;

          flex: 1 1 0;

          text-align: center;

          .glyphicon {

            vertical-align: -20px;

          }

        }

      }

    }

  }

}


//顶部固定

header .fixed {

  top: 0;

  background-color: #45b97c;

}

//尾部固定

footer .fixed {

  bottom: 0;

  background-color: #464547;

}

.main {

  margin: 15px 10px;

}

解决方案DEMO：http://jsbin.com/omaCOSir/latest

题外话

一个placeholder自适应bug，页面中使用<input>标签并且有属性placeholder，在页面横屏再转回竖屏时，会导致页面无法自适应，无论是android还是ios都会中招。

解决方法是，在<input>外层容器中加overflow:hidden，这个bug我没有截图，大家可以自测。

移动端position:fixed 解决方案的更多相关文章

  1. 关于苹果手机微信端 position: fixed定位top导航栏问题

    在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!do ...

  2. 【解决】Android 2.x 不支持overflow、position:fixed解决方案【转】

    Android 2.x和IOS5以下都不支持overflow:auto属性(position:fixed也不支持). 移动端浏览器兼容性和PC端相比,有过之而无不及.操作系统版本及各式浏览器和各式的屏 ...

  3. 在移动端H5开发中(关于安卓端position:fixed和position:absolute；和虚拟键盘冲突的问题，以及解决方案)

    一.在开发移动端webapp时,我们经常会遇到这样的问题,当我们需要在页面底部固定一个logo或者说明时,往往会采用position:fixed进行固定定位或者absolute定位到最底部 这是一个很 ...

  4. 移动端— position: fixed;固定定位解决方案

    这里有个关键的东西叫做viewport,你经常在页面的头部里可以见到它: <meta name="viewport" content="width=device-w ...

  5. 解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能

    解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问 ...

  6. 移动端web常见问题解决方案

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对i ...

  7. 移动端网页fixed布局问题解决方案

    问题说明 移动端web的footer常常设计为fixed布局,但是在页面键盘被拉起时fixed的布局会出现问题,自己试了下,在较低版本ios和部分安卓机上会有此问题.具体问题看图示: <body ...

  8. 移动端web页面使用position:fixed问题

    在做移动端项目时,碰到一个很纠结的问题,头部固定的问题,一开始使用fixed,发现一系列的问题, 问题1:footer输入框 focus 状态,footer 被居中,而不是吸附在软键盘上部. 测试环境 ...

  9. Issues with position fixed & scroll（移动端 fixed 和 scroll 问题）

    转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed ...

随机推荐

  1. 自动执行Python脚本

    一.自动执行Python脚本(前提条件是电脑已安装对应的Python程序) 1.1.win+R-输入cmd在输入where python查看Python的安装位置 C:\Users\ASUS\AppD ...

  2. tableau绘制热力地图

    一.右键国家地区和城市字段分别设置为地理角色-国家地区和城市 二.双击国家地区和城市添加到工作表 三.把订单id拖拽至标记卡的详细信息,标记改为密度显示,颜色设置为温度发散 四.最终整理结果如下图所示

  3. [BUUCTF]REVERSE——[WUSTCTF2020]Cr0ssfun

    [WUSTCTF2020]Cr0ssfun 附件 步骤: 例行检查,无壳儿,64位程序,直接ida载入,检索程序里的字符串,根据提示跳转 看一下check()函数 内嵌了几个检查的函数,简单粗暴,整理 ...

  4. 开源企业平台Odoo 15社区版之项目管理应用模块功能简介

    项目管理无论是各类证书的认证,如PMP.软考高级的信息系统项目管理师.中级的系统集成项目管理工程师等,还是企业实践都有着广泛的实际应用中,至今还是处于热门的行业,合格的或优化的项目经理还是偏少,对于I ...

  5. Sql中的小技巧

    1.where 字段名 regexp '正则表达式' 正则符号: ^ $ . [ ] * | . 表示1个任意字符 * 表示前面重复0次,或者任意次 ^ 开始 $ 结尾 [] 范围 | 或 sql示例 ...

  6. 分组依据（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 [视图]选项卡下,[筛选器]楼下,住着个[分组依据]. 这个功能,说白了,就是指定个"组",把同一组的 ...

  7. java 常用类库：Object类和Objects类

    1,Object类: Object类是所有的类,数组,枚举的父类,也就是说,JAVA中允许把任何的对象赋值给Object类(包括基础数据类型),当定义一个类的时候,没有使用extends关键字显示指定 ...

  8. 初识requests

    Make a Request 一开始要导入 Requests 模块: >>> import requests 然后,尝试获取某个网页.本例子中,我们来获取 Github 的公共时间线 ...

  9. 使用容器挂载NFS

    https://kubernetes.io/docs/concepts/storage/persistent-volumes/#persistent-volumes nfs 标准协议 v2 v3 v4 ...

  10. 【LeetCode】599. Minimum Index Sum of Two Lists 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 方法一:找到公共元素再求索引和 方法二:索引求和,使 ...