要在fixed的里面加一层position为absolute的专门用来装元素
<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" />
<style type="text/css">
header,
footer {
width: 100%;
height: 50px;
}
header .fixed,
.fixed {
position: fixed;
left: 0;
width: 100%;
height: 50px;
}
header .fixed .wrap,
.fixed .wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
header .fixed .wrap.float h1,
.fixed .wrap.float h1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 20px;
line-height: 50px;
color: #fff;
text-align: center;
}
header .fixed .wrap.float .glyphicon,
.fixed .wrap.float .glyphicon {
display: inline-block;
margin: 12px 10px;
color: #fff;
}
header .fixed .wrap.float .left-icon,
.fixed .wrap.float .left-icon {
float: left;
}
header .fixed .wrap.float .right-icon,
.fixed .wrap.float .right-icon {
float: right;
}
header .fixed .wrap.float:before,
.fixed .wrap.float:before,
header .fixed .wrap.float:after,
.fixed .wrap.float:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
header .fixed .wrap.float:after,
.fixed .wrap.float:after {
clear: both;
}
header .fixed {
top: 0;
background-color: #45b97c;
}
.fixed {
bottom: 0;
background-color: #464547;
}
.main {
margin: 15px 10px;
}
</style>
</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>
<div class="fixed">
<div class="wrap flex">
</div>
</div>
</body>