stick footer布局

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

斜斟星雨

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

阅读量378

点赞数

分类专栏： css 文章标签： stick-foot

本文链接：https://blog.csdn.net/HZKang/article/details/78416490

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

stick footer布局是在页面内容不足一屏时footer显示在当前屏幕的底部，超出一屏时，则在页面里内容的下面，移动端对这种需求比较常见，如下图：
未超出页面屏幕：
这里写图片描述

超出页面屏幕：
stick footer布局

实现负margin的布局方案：
html：

<div class="wrap">
  <div class="content"></div>
  <div class="footer"></div>
</div>

css:

.wrap{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.content{
    margin-top: 64px;
    padding-bottom: 64px;
}
.footer{
    width: 32px;
    height: 32px;
    margin: -64px auto;
    clear: both;
    font-size: 32px;
}