相信不少人做移动端项目的时候都会遇到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. 【分布式技术专题】「OSS中间件系列」Minio的文件服务的存储模型及整合Java客户端访问的实战指南

    Minio的元数据 数据存储 MinIO对象存储系统没有元数据数据库,所有的操作都是对象级别的粒度的,这种做法的优势是: 个别对象的失效,不会溢出为更大级别的系统失效. 便于实现"强一致性& ...

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

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

  3. JDK安装错误问题总结。

    Windows10安装JDK,测试java -version时出现could not open XXX\jvm.cfg的解决方法. 1. 切记,环境变量修改后重新测试时一定要关闭命令再重新打开才生效 ...

  4. Tornado.web.Application之-settings

    应用程序配置 class  tornado.web.Application(handlers:List [Union [Rule,Tuple]] = None,default_host:str = N ...

  5. mysql绿色版添加服务

  6. IDEA把Main方法打包成jar包

    创建一个maven项目 写一个main方法 Module:选择main方法所在的模块,我这里只有一个模块 所以默认选中 Main Class:选择main方法所在的类 Directory for ME ...

  7. Spring支持的常用数据库传播属性和事务隔离级别

    一.事务的传播属性 1.propagation:用来设置事务的传播行为,一个方法运行在了一个开启了事务的方法中时,当前方法是使用原来的事务还是开启一个新的事务. (1)propagation.REQU ...

  8. Linux（centos）安装es（elasticsearch）

    前提条件--需要安装jdk环境,不同版本的es所对应的jdk版本要求不同,es6的使用jdk1.8可以 1.下载elasticsearch压缩包 下载地址:https://www.elastic.co ...

  9. 【LeetCode】399. Evaluate Division 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  10. 【LeetCode】865. Smallest Subtree with all the Deepest Nodes 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...