使footer保持在页面的底部，是常见的需求，之前面试的时候也遇见了一个这样的问题，今天在这里记录下css实现的方式。
使footer保持在页面的底部，需要考虑header+content部分不够多的情况，在页面下方会留出部分的空白，如：
方法一：采用绝对定位方式。
html代码：
<body>
<div class="container">
<header>header</header>
<section>content</section>
<footer>footer</footer>
</div>
</body>
css代码：
body,html{
height: 100%;
}
.container{
position:relative;
padding-bottom:150px; //此次为footer的高度或大于footer的高度
width:100%;
min-height: 100%;
box-sizing: border-box;
}
header{
width: 100%;
height: 100px;
}
section{
width: 100%;
height: 300px;
}
footer{
position:absolute;
width:100%;
height: 150px;
left:;
bottom:;
}方法二：flex布局
注意：设为flex布局之后，子元素的float、clear和vertical-align属性将失效
完成图示：
HTML代码：
<body>
<div class="container">
<header>header</header>
<section>content</section>
<footer>footer</footer>
</div>
</body>
CSS代码：
body, html{
height: 100%;
}
.container{
display: flex；
height: 100%;
flex-direction: column; //主轴方向
}
header{
width: 100%;
header: 100px;
flex: 0 0 auto; //flex： none | flex-grow flex-shrink flex-basis} section{ width: 100%; height: 300px; flex: 1 0 auto; } footer{ width: 100%; height: 150px; flex: 0 0 auto; }解析：
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。