相信不少人做移動端項目的時候都會遇到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我沒有截圖，大家可以自測。