可以使用flex布局，让footer固定在底部。有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。
注意的问题：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
//HTML代码如下
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
//CSS代码如下
.Site {
display: flex;
display: -webkit-flex; /* Safari */
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
ie浏览器样式不对，存在兼容性问题