只要做网页，就百分之九十九会做footer的布局。一般我们最想要的布局是，footer一直固定在网页的底部。如果网页内容不多，就把footer固定在可视区的底部。

总体布局一般是这样的：

I am header

I am content

I am footer

如果content的内容不多，不足使footer撑到底部，就会出现这样的情况。

黑色边框包围的地方为浏览器可视区。可以看到footer是没有贴到可视区底部的。

只需要修改一下代码，既可以解决问题：

body{
  width: 100%;
  min-height: 100%;
  position: relative;
}
.content{
height: 300px;
padding-bottom: 50px; /*当窗口高度很小时，可以使content和footer保持一定的距离*/
}
.footer{
position: absolute;
bottom: 0;
height: 50px;
}