使用 flexbox 將 footer 保持在底部
阿新 • • 發佈：2020-07-16
佈局網頁時, 有時頁面內容太少，無法將內容區域撐開，從而在 footer 下面留下一大塊空白。
解決方法 flexbox
HTML
<body> <header>...</header> <section class="main-content">...</section> <footer>...</footer> </body>
CSS
html{ height: 100%; } body{ display: flex; flex-direction: column; height: 100%; } header{ /* 我們希望 header 採用固定的高度，只佔用必須的空間 */ /* 0 flex-grow, 0 flex-shrink, auto flex-basis */ flex: 0 0 auto; } .main-content{ /* 將 flex-grow 設定為1，該元素會佔用全部可使用空間 而其他元素該屬性值為0，因此不會得到多餘的空間*/ /* 1 flex-grow, 0 flex-shrink, auto flex-basis */ flex: 1 0 auto; } footer{ flex: 0 0 auto; }
相容性
所有的主流瀏覽器都支援 flexbox，就 IE 來說，IE9以後的版本都是支援的。