stick-footer 布局

最新推荐文章于 2020-11-26 22:00:11 发布

广东话的蛇皇

最新推荐文章于 2020-11-26 22:00:11 发布

阅读量147

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/105596889

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

stick-footer

文章内容不足满屏时 footer在底部，超过满屏时footer在内容末尾。
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>让footer固定在页面顶部</title>
        <style>
            * {
                margin: 0;
            }
            
            html, body {
                height: 100%;
            }
            
            .wrapper {
                min-height: 100%;
                height: auto !important; /* 如果你不需要考虑IE6，则可以把这行与下一行代码删除 */
                height: 100%;
                margin: 0 auto -4em;
            }
            
            .footer, .push {
                height: 4em;
            }
            body{
                text-align: center;
            }
            .footer{
                background-color: #00BBFF;
            }
        </style>
    </head>

    <body>
        <div class="wrapper">
            <h3>你可以通过调整浏览器大小，查看footer的表现</h3>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>
            <p>我是占位的</p>

            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Footer</p>
        </div>
    </body>
</html>

广东话的蛇皇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
stick-footer 布局

stick-footer文章内容不足满屏时 footer在底部，超过满屏时footer在内容末尾。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>让footer固定在页面顶部</title> &...
复制链接

扫一扫