stick footer布局的实现（常用）

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

catLemon丶

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

阅读量1.1k

点赞数 2

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/cat5123186/article/details/84634057

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

stick footer布局简介

css经典布局—stick footer布局需求:将footer固定到底部，文章内容不足满屏时 footer在底部，超过满屏时footer在内容末尾。例如：App通常会有关闭按钮在底部，内容不足满屏时关闭按钮在底部，超过满屏时关闭按钮在内容末尾。

在这里插入图片描述

如何完成stick footer布局

方法一：通过 position:fixed 实现

/* 设置容器为满屏大小 */
   .wrapper{
        position: fixed;
        top: 0;
        left:0;
        width: 100%;
        height: 100%;
        overflow: auto;
        font-size: 20px;
    }
    
/* 第二步子盒子设置最小高度 给一个padding-bottom 等于footer高度 避免内容将footer遮盖*/
    .wrapper .content{
      min-height: 100%;
      padding-bottom: 50px;
    }
    
/* 第三步footer的height和margin-top要相等 且清除浮动*/
    .wrapper .footer{
        position: relative;
        width:100%;   
        height: 50px;
        margin: -50px auto 0 auto;
        clear: both;
        text-align: center;
        background: black;
        color:white;
        line-height: 50px;
    }

未完待续。。。