JS如何让HTML页脚始终保持在文档底部。

最新推荐文章于 2024-06-16 09:00:57 发布

皮皮哈皮鸭

最新推荐文章于 2024-06-16 09:00:57 发布

阅读量988

点赞数 1

分类专栏：笔记文章标签： html js css

本文链接：https://blog.csdn.net/weixin_44473605/article/details/104432516

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

给大家分享一个让页脚始终保持在文档底部的代码，不喜勿喷。

HTML部分

<body>
    <div style="height: 500px;width: 300px;background-color: blue;"></div>

    <footer id="footer">
        123456789
    </footer>
    
</body>

CSS部分

* {
            margin: 0px;
            padding: 0px;
        }
        
        #footer {
            width: 100%;
            height: 30px;
            background: red;
            bottom: 0px;
            text-align: center;
            color: white;
        }

JS部分

<script>
    function a() {
        return document.compatMode == "BackCompat" ? document.body.clientHeight : document.documentElement.clientHeight;
        //标准兼容模式关闭,重新获取浏览器高度
    }
    var f = document.getElementById('footer');
    (window.onresize = function() {
        f.style.position = document.body.scrollHeight > a() ? '' : 'absolute';
    })();
</script>

我是一位小白，如果大家有更好的方法可以留言评论，谢谢大家！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

皮皮哈皮鸭

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
JS如何让HTML页脚始终保持在文档底部。

给大家分享一个让页脚始终保持在文档底部的代码，不喜勿喷。HTML部分<body> <div style="height: 500px;width: 300px;background-color: blue;"></div> <footer id="footer"> 123456789 </foote...
复制链接

扫一扫