<!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>