内容不足以铺满屏幕高度时,footer居底显示,如何页面铺满了则在内容最下面,4种方法

这篇在浏览博客时看到的，转载了他的文章 https://blog.youkuaiyun.com/u012076852/article/details/53068082

同样话不多说，直接上代码

方法一：

html：
<div class="page">
    主要页面
</div>
<footer>底部</footer>


css:
html,body{
    height: 100%;
    margin: 0;
    padding: 0;
}
.page{
    box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
    min-height: 100%;
    padding-bottom: 300px;
}
footer{
    height: 300px;
    margin-top: -300px;
    opacity: 0.5;
}

主要内容放在page内部，page最小高度为100%（注意这里html，body高度也要设为100%）。page有个padding-bottom大小为footer的高度（按需要调整），最重要的一点page的box-sizing:border-box，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，也就是说page的padding-bottom也会设定在min-height：100%内。而footer的margin-top为负的自身高度，把自己拉到page的padding-bottom空白块上，从而达到需求效果。
优点：简洁明了，没有冗余的div盒子；
缺点：box-sizing:border-box的兼容问题,ie7以下包括ie7不支持

方法二：

html:
<div class="page-container">
    <div class="page-main">
        主要页面 
    </div>
    <footer>底部<