css实现一个盒子永远置于页面的底部

最新推荐文章于 2023-05-16 23:43:27 发布

zhener09

最新推荐文章于 2023-05-16 23:43:27 发布

阅读量2.5w

点赞数 7

本文链接：https://blog.csdn.net/sinat_41747081/article/details/90205852

版权

版权声明：本文为博主原创文章，未经博主允许不得转载。
本文要实现的效果为始终让下方的一个盒子位于最底部，如果所示：
在这里插入图片描述
html代码为：

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

css实现方法一：使用定位：

body {
        margin: 0;
        padding: 0;
    }
    .footer {
        width: 100%;
        height: 80px;
        background: #5b6d81;
        line-height: 80px;
        text-align: center;
        /* 方法一 */
        position: fixed;
        bottom: 0;
    }

css实现方法二：使用100vh

body {
        margin: 0;
        padding: 0;
    }
    .footer {
        width: 100%;
        height: 80px;
        background: #5b6d81;
        line-height: 80px;
        text-align: center;
        /* 方法一 */
        /* position: fixed;
        bottom: 0; */
    }
    .content {
        height: 100vh;
    }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhener09

关注关注

7
点赞
踩
38

收藏

觉得还不错? 一键收藏
0
评论
css实现一个盒子永远置于页面的底部

版权声明：本文为博主原创文章，未经博主允许不得转载。本文要实现的效果为始终让下方的一个盒子位于最底部，如果所示：html代码为：<body> <div class="content">content</div> <div class="footer">footer</div></body>css实...
复制链接

扫一扫