關鍵詞：display: flex，flex: 1, overflow-y: scroll; 實現：head 和footer 固定，中間body多了滾動，少了撐滿； head和footer寬度根據內容撐起，當然你可以自己設置........ 小二，上代碼！ 來嘍~~ 關鍵的css來啦！ 附上全部代碼 ...
關鍵詞：display: flex，flex: 1, overflow-y: scroll;
實現：head 和footer 固定，中間body多了滾動，少了撐滿； head和footer寬度根據內容撐起，當然你可以自己設置........
小二，上代碼！
來嘍~~
// html佈局 <html> <body> <div class="container"> <div class="head">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage</div> <div class="body"> <div>orry, but the page you were trying to view does not exist.</div> <div>shhhhsss</div> <div>shhhhsss</div> <div>shhhhsss</div> <div>shhhhsss</div> <div>shhhhsss</div> </div> <div class="footer">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Found</div> </div> </body> </html>
關鍵的css來啦！
2 * { 3 line-height: 1.2; 4 margin: 0; 5 } 6 html, body { 7 font-family: sans-serif; 8 height: 100%; 9 width: 100%; 10 } 11 .container{ 12 display: flex; // 關鍵， flex佈局 13 flex-direction: column; // 關鍵，三塊主題column擺放。 14 height: 100vh; // 關鍵，設置高度為可見高度的100%； 15 } 16 .head{ 17 width: 100%; 18 background: springgreen; 19 } 20 .body{ 21 flex: 1; // 關鍵， 填充剩餘空間 22 width: 100%; 23 background: lightyellow; 24 overflow-y: scroll; // 關鍵， 超出部分滾動 25 } 26 .footer{ 27 width: 100%; 28 background: goldenrod; 29 }
附上全部代碼，可以自己複製到瀏覽器中打開，看效果~
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Not Found</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { line-height: 1.2; margin: 0; } html, body { color: #888; font-family: sans-serif; height: 100%; width: 100%; } .container{ display: flex; height: 100vh; flex-direction: column; } .head{ width: 100%; background: springgreen; } .body { background: lightyellow; width: 100%; flex:1; color: black; overflow-y: scroll; } .footer { background: goldenrod; width: 100%; } .body div { height: 200px; width: 300px; background: greenyellow; margin: 20px; } </style> </head> <body> <div class="container"> <div class="head">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Found</div> <div class="body"> <div>orry, but the page you were trying to view does not exist.</div> <div>shhhhsss</div> <div>shhhhsss</div> <div>shhhhsss</div> <div>shhhhsss</div> <div>shhhhsss</div> </div> <div class="footer">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Found</div> </div> </body> </html>
