Sticky Footer 让页脚紧贴页面底部

最新推荐文章于 2023-12-14 15:21:17 发布

1091214370的博客

最新推荐文章于 2023-12-14 15:21:17 发布

阅读量801

点赞数

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

本文链接：https://blog.csdn.net/qq_34149935/article/details/55805368

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

功能效果：当页面内容不超过当前屏幕高度时，页脚在屏幕的底部；当页面内容过多超过当前屏幕高度时，页脚在内容后面。

图片效果演示：
当页面内容不超过当前屏幕高度时：

当页面内容过多超过当前屏幕高度时：

代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    html,body,.text{height:100%;}
    body,p,div{margin:0;}
    .all{height:auto; min-height: 100%;}
    .text{padding-bottom: 50px;}
    .footer{width:100%;height: 50px; background: red;text-align:center;margin-top:-50px;position:absolute;}
    </style>
</head>
<body>
<div class="all">
    <div class="text">
        <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
        /* 可以通过增加文字内容测试效果*/
    </div>
    </div>
    <div class="footer">关闭</div>
</body>
</html>

怎么使用Sticky Footer代码

优惠劵

1091214370的博客

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Sticky Footer 让页脚紧贴页面底部

功能效果：当页面内容不超过当前屏幕高度时，页脚在屏幕的底部；当页面内容过多超过当前屏幕高度时，页脚在内容后面。图片效果演示：当页面内容不超过当前屏幕高度时：当页面内容过多超过当前屏幕高度时：代码实现：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>demo</title> <style>
复制链接

扫一扫