本文寫於2020年1月14日。
前言：
主要面向手機屏幕設計前端頁面，需求布局如下：
要實現以上布局，且不使用JS去控制DOM，就需要用到CSS中的flex布局（建議您也去把flex好好學一下）。
本文的實現方法只用純正的HTML和CSS，不需要任何框架或組件。
實現：
直接上代碼好了。
html部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>內容不長</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <section id="main"> <h1>這里是主體內容，高度不一定</h1> <h2>高度不定</h2> <h3>其他內容</h3> <p> 內容不多，balabala..... </p> </section> <!-- footer要顯示在屏幕底部或緊跟在main之后 --> <footer> 這里是footer<br/> 高度不一定 </footer> <!-- nav永遠顯示在屏幕底部最上層 --> <nav> <h3 class="active"> <a href="test1.html">內容不長</a> </h3> <h3> <a href="test2.html">內容夠長</a> </h3> </nav> </div> </body> </html>
CSS部分：
/* 對html和body關鍵是min-height: 100vh */ html,body { margin:0; min-height:100vh; } /* 這里是花哨 */ h1,h2,h3,h4,h5,h6,p { margin: 0; padding: 0; } #container { /* 對#container啟用flex布局 *? display: flex; /* 用flex-direction定義主軸為縱軸，即垂直布局 */ flex-direction: column; /* 最小高度同樣為屏幕高度 */ min-height:100vh; /* (其實這句可以不用）用space-between實現兩端布局 */ justify-content: space-between; } #main { background-color:bisque; /* flex:1;的值是1 1 0%，【父控件有剩余空間占1份放大，父控件空間不足按1縮小，自身的空間大小是0%】 */ /* （引自https://www.douban.com/note/717223803/） */ flex:1; } /* footer欄不設置flex屬性，所以它的高度只會隨自身內容變化，不受頁面其他因素影響 */ footer { background-color:cadetblue; padding: 10px; /* padding-bottom的值是為nav欄設置的，否則nav欄會擋住一部分內容 */ padding-bottom: 40px; } /* nav欄的樣式主要來向bootstrap中的fixed-bottom，背景色以下的內容為自行定義 */ nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030; background-color: lightgreen; height: 30px; /* nav欄中的按鈕們也用flex布局，水平向為默認值不用特別定義 */ display: flex; } /* 下面的內容與本文主題無關，不說了 */ nav h3 { flex: 1; text-align: center; border:1px solid #ff00dd; } nav h3.active { background-color: #ffffff; }
為了演示效果，我的目錄結構如下：
style.css --- 樣式
test1.html --- 頁面內容不夠高時的效果
test2.html --- 頁面內容很高時的效果
效果：
總結：
遇到問題找百度（谷歌或者其他什么）是很多人都會去做的事，但是，別人家的結果真的不一定就適合自己。這次，我也是找了好長時間之后沒有理想的結果，所以就索性直接去學習了一下flex布局，然后自己在項目之外單獨做了這么一個測試，結果還就成了，所以，很多事情應該都沒有我們原本想象的那么簡單，同時也沒有我們原本想象的那么不簡單。
關於文中的內容，歡迎您隨時與我交流。
感謝您的來訪。