Sticky footer布局

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

To-strive

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

阅读量152

点赞数

分类专栏： HTML+CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_33848658/article/details/115349722

版权

HTML+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文章从https://www.jb51.net/css/649287.html参考

上图所显示的效果就是sticky Footer，当页面主题内容不够长时，footer定位在窗口的底部，当页面主题内容超出窗口后，footer显示在页面的最底部

1、flex布局方式

html代码：

<body>
    <div class="header">标题</div>
    <div class="content">
        <p>测试文字内容</p> 
        <p>测试文字内容</p>
        <p>测试文字内容</p>
        <p>测试文字内容</p>
    </div>
    <div class="footer">
        CopyRight @ 佳发教育 2021
    </div>
</body>

css代码：

body { display: flex; flex-flow: column; min-height: 100vh; overflow:auto; }
.main { flex:1; }

2、经典套路：padding-bottom + margin-top方式

html代码：

    <div class="wrapper clearfix">
        <div class="title">Sticky Footer</div>
        <div class="content">
              <p>测试文字内容</p> 
              <p>测试文字内容</p>
              <p>测试文字内容</p>
              <p>测试文字内容</p>
        </div>
    </div>
    <div class="footer">
         CopyRight @ 佳发教育 2021
    </div>

css代码：

.wrapper{
    min-height: 100vh;
}
.content{
    padding-bottom: 50px;
}
.footer{
    height: 50px;
    margin-top: -50px;
}

To-strive

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Sticky footer布局

本文章从https://www.jb51.net/css/649287.html参考上图所显示的效果就是sticky Footer，当页面主题内容不够长时，footer定位在窗口的底部，当页面主题内容超出窗口后，footer显示在页面的最底部1、flex布局方式html代码：<body> <div class="header">标题</div> <div class="content"> <...
复制链接

扫一扫