<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"> <style> body,html{ margin: 0; padding: 0; width: 100%; height: 100%; font-size: 14px; } .HolyGrail { display: -webkit-flex; display: flex; min-height: 100px; flex-direction: column; } header, footer { text-align: center; /* flex: 1;设置为1则顶体尾平分body */ height: 50px; background: #ccc; } .HolyGrail-body { display: -webkit-flex; display: flex; flex: 1; } .HolyGrail-content { flex: 1; background: pink; } .HolyGrail-nav, .HolyGrail-ads { /* 两个边栏的宽度不放大也不缩小设为固定2em */ flex: 0 0 2em; } .HolyGrail-nav { /* 导航放到最左边 */ order: -1; } /* @media (max- 768px) { .HolyGrail-body { flex-direction: column; flex: 1; } .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content { flex: auto; } } */ .Site { display: -webkit-flex; display: flex; min-height: 100vh;/*1vh表示浏览器高度的1%，100vh为浏览器高度，感觉这个挺好的*/ /* min-height: 100%;另一种写法 */ flex-direction: column; } .Site-content { flex: 1; overflow-y: scroll; background: #0099ff; } </style> </head> <body class="Site"> <header>爱淘宝</header> <div class="HolyGrail-body Site-content"> <main class="HolyGrail-content" style="height: 1000px;">...</main> <nav class="HolyGrail-nav">...</nav> <aside class="HolyGrail-ads">...</aside> </div> <footer>淘宝底部</footer> </body> </html>
以前一直使用position为fixed来固定元素，发现很难处理内容的高度，参考了淘宝的布局感觉这种解决方法实在好用。附上淘宝网页链接https://m.taobao.com/#index