相信不少人做移动端项目的时候都会遇到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. iOS-启动项目（一）设置 rootViewController

    摘要 刚创建一个新的项目,在 AppDelegate 中设置 rootViewController 来确定应用的首页是一个最基本的处理,因为是不常操作的处理,所以容易忽略其中的某个步骤,导致无法设置成 ...

  2. canvas绘制圣诞树

    最近不知道咋的都玩起了用备忘录手绘圣诞树,作为万能的程序员,肯定也要跟上潮流,那用代码来实现圣诞树吧.哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 实现效果如下: ...

  3. [BUUCTF]REVERSE——easyre

    easyre 附件 拿到附件,首先查壳儿,(不仅仅是查壳,也能看一下程序的大概情况,知道是几位的程序,用对应位数的ida打开)64位程序,没有壳 64位ida直接载入,shift+f12首先检索一下程 ...

  4. 【二进制】CTF-Wiki PWN里面的一些练习题（Basic-ROP篇）

    sniperoj-pwn100-shellcode-x86-64 23 字节 shellcode "\x31\xf6\x48\xbb\x2f\x62\x69\x6e\x2f\x2f\x73\ ...

  5. 【web】docker复现环境踩坑

    在先知看到有师傅发了个学习 P 牛的代码审计的文章,在 github 上下下来复现环境,结果 docker 各种问题,气死 安装 docker-compose:pip install -i https ...

  6. WebRTC与音频音量

    WebRTC打开麦克风,获取音频,在网页上显示音量. 播放示例音频 先从播放音频入手.准备一个现成的音频文件. 界面上放一个audio元素,提前准备好一个音频文件,路径填入src <audio ...

  7. CF19A World Football Cup 题解

    Content 有 \(n\) 个球队参加一场足球比赛,比赛排名前 \(\dfrac{n}{2}\) 的队伍将会进入下一轮的淘汰赛.比赛将会打 \(\dfrac{n(n-1)}{2}\) 场,胜者得 ...

  8. LuoguB2078 含 k 个 3 的数 题解

    Content 给定一个数 \(n\),判断其数位中是否恰好有 \(k\) 个 \(3\). 数据范围:\(1<n\leqslant 10^{15}\),\(1<k\leqslant 15 ...

  9. Nginx加载新的模块，编译报错记录

    参考:https://www.cnblogs.com/Leechg/p/9969000.html ---------如下我的操作记录--------------- nginx -V查看当前nginx信 ...

  10. java 编程基础 类加载器

    什么是类加载器 类加载器负责将class文件(可能在磁盘上,也可能在网络上)加载到内存中,并为之生成对应的java.lang.Class对象.Java开发中无须过分关心类加载机制,但所有的编程人员都应 ...