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