一個將 footer 保持在底部的最好方法
阿新 • • 發佈：2019-02-05
http://www.jianshu.com/p/4896e6936ce3
解決該問題的最好方法是採用 flexbox——CSS3提供的一種先進佈局模型，旨在建立具有適應性的佈局。如果你對 flexbox 還不怎麼熟悉，文章最後有一些擴充套件閱讀連結，可以幫助你瞭解 flexbox。
我們的演示頁面應該具備 Header、主體內容區域和 Footer，下面是該頁面的 HTML
<body>
<header>...</header>
<section class="main-content">...</section>
<footer 為了啟用 flex模式，我們將 body 的 display 屬性設定為 flex, 然後將方向屬性設定為列, （預設是行，也就是橫向佈局）。同時，將html 和 body 元素的高度設定為100%，使其充滿整個螢幕。
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}現在，我們需要調整各個區域佔用的頁面空間，我們將通過flex 屬性來達到這一目的，該屬性實際包含了三個屬性，分別是：
- flex-grow：元素在同一容器中對可分配空間的分配比率，及擴充套件比率
- flex-shrink：如果空間不足，元素的收縮比率
- flex-basis：元素的伸縮基準值
我們希望 header 和footer 只佔用他們應該佔用的空間，將剩餘的空間全部交給主體內容區域
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 */