Sticky footer布局

Sticky Footer布局概括如下：如果页面内容不够长的时候，页脚粘贴在视窗底部；如果内容足够长，页脚会被内容向下推送。

我在网上看了几种方法，记录一下最简单的这种方法 方便使用：

<div class="div1">
    <section></section>
    <footer></footer>
</div>
<!--我比较喜欢用scss-->
.div1{
    display: flex;
    flex-direction: column;    //主轴为垂直方向，起点在上部
    min-height: 100vh;          
    section{
        flex: 1;                         //占据所有剩余空间
        width: auto;height: 200px;
        background-color: red;
    }
    footer{
        flex: 0;                         //不占据剩余空间
        width: auto;height: 100px;
        background-color: black;
    }
}