相信不少人做移动端项目的时候都会遇到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)

    # 柱状图 import matplotlib.pyplot as plt import matplotlib as mpl mpl.rcParams['font.sans-serif']=['Fan ...

  2. [BUUCTF]REVERSE——findit

    findit 步骤: apk文件,直接用apkide打开,找到findit文件 查看了所有的函数,没找到有关flag的线索,但是找到了一串奇怪的16进制 将第一串转换一下,感觉第二串应该是flag 拿 ...

  3. 建立资源的方法（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 终于,进入第5章资源计划编制了,所以就不能还在任务工作表里厮混了是吧,那就先进入资源工作表吧:[任务]>[甘特图]& ...

  4. CF17A Noldbach problem 题解

    Content 若一个素数可以用比它小的相邻的两个素数的和加 \(1\) 表示,那么称这个素数为"好素数". 给定两个正整数 \(n,k\),问从 \(2\) 到 \(n\) 的好 ...

  5. 两阶提交、三阶提交、TCC框架

    首先介绍一下分布式事务,分布式事务是指会涉及到操作多个数据库的事务.其实就是将对同一库事务的概念扩大到了对多个库的事务.目的是为了保证分布式系统中的数据一致性.分布式事务处理的关键是必须有一种方法可以 ...

  6. svn服务器用户名密码更改后，如何更新本地用户名密码

    在提交时,IDE会给出这样的提示,说明用户名密码已更改 在命令行输入 svn ls https:XXX(项目的地址),具体步骤如下图

  7. Linux使用tar解压的时候去掉父级目录

    去除解压目录结构使用  --strip-components N 如: 压缩文件text.tar 中文件信息为 src/src1/src2/text.txt 运行 tar -zxvf text.tar ...

  8. qt creator设置默认输出目录

    note creator version : 4.13.1 敲黑板,一定要先配置好 Qt creator的default build directory , 再创建项目,最后再编译 敲黑板,一定要先配 ...

  9. c++之可变参数格式化字符串（c++11可变模板参数）

    本文将使用 泛型 实现可变参数. 涉及到的关见函数:  std::snprintf 1.一个例子 函数声明及定义 1 // 泛型 2 template <typename... Args> ...

  10. c++之Linux获取可用串口

    1.关于 这份代码来自: stackoverflow 2. 测试 2.1 测试环境: vmware + ubuntu, vmware添加串口(虚拟机关机后再添加) 2.2 测试输出 3. 源码 #in ...