CSS布局：让footer底部始终保持在底部

发布于：

网页布局的时候，如果页面内容不足一屏，通常会出现底部版权信息上浮的情况，为了保持页面的美观和统一吗，需要始终保持footer内容在底部，一下是我推荐实现的方式： 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>
<meta charset="utf-8">
<style type="text/css">
* {
padding: 0;
margin: 0
}

body,
html {
display: flex;
flex-direction: column;
height: 100%;
}

#container {
flex: 1 0 auto;
background: #600
}

#footer {
flex: 0 0 auto;
height: 100px;
width: 100%;
background: #000
}

#header {
height: 100px;
width: 100%;
background: #000;
flex: 0 0 auto;
}
</style>
</head>

<body>
<header id="header"></header>
<main id="container"></main>
<footer id="footer"></footer>
</body>

</html>