什么是 Sticky footer 布局

最新推荐文章于 2023-02-13 20:45:00 发布

敲代码有瘾

最新推荐文章于 2023-02-13 20:45:00 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/weixin_45786214/article/details/105442387

版权

今天在看一个vue项目时看到了这个Sticky footer布局，第一次听到这个所以记录一下

1.什么是Sticky footer布局

一个网页通常分为页头header，内容content和页脚footer，Sticky footer布局就是在页面内容不够长的情况下，footer能定位在页面的最下方，并且页面足够长的时候，footer也能被内容向下推送。简单的说就是为了解决这样的画面：
在这里插入图片描述
使用Sticky footer布局后：

实现Sticky footer布局的方法：
负margin布局方式实现：
HTML

<div class="wrapper clearfix">
    <div class="content">
      // 页面内容
    </div>  
</div>
<div class="footer">
    // footer的内容
</div>

css

.wrapper {
    min-height: 100%;
}

.wrapper .content{
    padding-bottom: 50px; /* footer的高度 */
}

.footer {
    position: relative;
    margin-top: -50px;  /* 使footer区块正好处于content的padding-bottom位置 */
    height: 50px;
    clear: both;
}

.clearfix::after {
    display: block;
    content: ".";
    height: 0;
    clear: both;
    visibility: hidden;
}