css 固定footer到底部

雖然說標題是說“固定”底部，但是我們想要的效果不是position: fixed。使用固定定位，在內容高於窗口高度時，就會擋住我們的內容。

最完美的實現方式是使用Flexbox。實現的關鍵就是使用不太被關注的flex-grow屬性，可以在我們的內容標籤元素（比如div）中使用

HTML

<div id="document">
	<nav>
		<h1>頭部內容</h1>
	</nav>
	<main>
		<p>可以添加更多內容看看底部的變化哦！</p>
	</main>
	<footer>
		<h1>底部內容</h1>
	</footer>
</div>

CSS

#document {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #202020;
    font-family: microsoft yahei,wenquanyi micro hei,sans-serif !important;
}

nav, footer {
    background: #494949;
    display: flex;
    justify-content: center;
}

main {
    color: #bdbdbd;
    flex: auto;
}

footer {
    flex-shrink: 0;
}

* {
    margin: 0;
}

h1,
p {
    padding: 15px;
}

nav > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px #00000080;
}

footer > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px #00000080;
}