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;
    }
}
    原文作者:xilong
    原文地址: https://www.jianshu.com/p/c552da840c6e
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞