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