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