移动端position:fixed 解决方案

相信不少人做移动端项目的时候都会遇到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我没有截图，大家可以自测。

 

posted @ 2015-03-11 11:40  MegaSu  阅读(7123)  评论(0)  编辑  收藏  举报