相信不少人做移动端项目的时候都会遇到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. [BUUCTF]PWN——ez_pz_hackover_2016

    ez_pz_hackover_2016 题目附件 解题步骤: 例行检查,32位,开启了RELRO保护,二进制的保护机制看这里 由于没有开启nx保护,对于这题一开始想到的是利用写入shellcode来获 ...

  2. 工作簿合并（Excel代码集团）

    同一文件夹内N个工作簿 ,每个工作簿里N个工作表,最终合并到一个工作表里的代码. 假设每个表格结构相同,第一行为标题,第二行为表头,表头内容固定,行数不固定,列固定14,工作表数量不固定,工作簿数量不 ...

  3. 自己实现一个Electron跨进程消息组件

    我们知道开发Electron应用,难免要涉及到跨进程通信,以前Electron内置了remote模块,极大的简化了跨进程通信的开发工作,但这也带来了很多问题,具体的细节请参与我之前写的文章: http ...

  4. CF1082A Vasya and Book 题解

    Content 给定 \(T\) 组数据,每组数据给出四个整数 \(n,x,y,d\).小 V 有一本 \(n\) 页的书,每次可以恰好翻 \(d\) 页,求从第 \(x\) 页恰好翻到第 \(y\) ...

  5. socket网络编程基础模块

    更多功能 sk = socket.socket(socket.AF_INET,socket.SOCK_STREAM,0) 参数一:地址簇 socket.AF_INET IPv4(默认) socket. ...

  6. Tornado WEB服务器框架 Epoll

    引言: 回想Django的部署方式 以Django为代表的python web应用部署时采用wsgi协议与服务器对接(被服务器托管),而这类服务器通常都是基于多线程的,也就是说每一个网络请求服务器都会 ...

  7. 【RTOS】FreeRTOS中的任务堆栈溢出检测机制

    目录 前言 任务堆栈 堆栈溢出 任务堆栈溢出检测机制 API 两种堆栈溢出检测方式 堆栈溢出钩子函数 内核何时检测任务堆栈溢出 任务堆栈溢出检测存在的局限性 前言 注意:本笔记发布时可能忘记补充查看d ...

  8. Jenkins安装部署使用图文详解（非常详细）

    前言 最近公司需要弄一套自动化运维部署,于是抽空学习了一下,用了两天左右完成Jenkins的安装部署和各种项目的配置化,于是整理一下进行分享. 介绍 Jenkins是一个独立的开源软件项目,是基于Ja ...

  9. STC8PROG - Linux下的 STC8G STC8H 烧录工具

    STC8PROG - Linux下的 STC8G STC8H 烧录工具 动机 在Linux下用 VSCode + PlatformIO 做开发, 因为VSCode的界面字体代码提示, 以及自定义的类J ...

  10. JAVA根据URL生成二维码图片、根据路径生成二维码图片

    引入jar包 zxing-2.3.0.jar.IKAnalyzer2012_u6.jar 下载地址:https://yvioo.lanzous.com/b00nlbp6h                ...