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;
}