<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<link rel="stylesheet" type="text/css" href="flexible.css"/>
<title></title>
<script src="lib-flexible.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.page-container {
display: -webkit-flex;
display: flex;
min-height: 100vh;/*1vh表示浏览器高度的1%，100vh为浏览器高度，感觉这个挺好的*/
/* min-height: 100%;另一种写法 */
flex-direction: column;
}
header,footer {
100%;
height: 1rem;
background: rgba(0,0,0,.5);
}
.content {
flex: 1;
background: red;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.xx {
height: 100rem;
}
</style>
</head>
<body class="page-container">
<!--顶部固定导航-->
<header class="header"></header>
<!--内容区域-->
<div class="content">
<div class="xx">asdasdasdsa</div>
</div>
<!--底部固定-->
<footer class="footer"></footer>
</body>
</html>