JS控制footer在浏览器的底端或者在文档的底端

最新推荐文章于 2024-07-08 10:00:42 发布

刀刀小丑

最新推荐文章于 2024-07-08 10:00:42 发布

阅读量559

点赞数

CC 4.0 BY-SA版权

文章标签： footer

本文链接：https://blog.youkuaiyun.com/qq_24339009/article/details/50372373

本文介绍如何使用JavaScript确保footer元素在文档高度小于浏览器高度时位于浏览器底端，在文档高度大于浏览器高度时位于文档底端。通过设置footer元素的定位属性，实现响应式的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   JS控制footer在浏览器的底端或者在文档的底端



           1.当文档高度小于浏览器高度时，让footer在浏览器底端。给footer绝对定位，控制在浏览器底端。
           
           2.当文档高度大于浏览器高度时，让footer在文档底端就好。除掉绝对定位。





<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <title>Footer</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .header{
            width: 100%;
            height: 50px;
            background-color: rgba(254, 157, 96, 0.37);
        }
        .content{
            width: 100%;
            height: 500px;
            background-color: rgba(206, 147, 254, 0.37);
        }
        .footer{
            width: 100%;
            height: 50px;
            background-color: rgba(176, 254, 163, 0.37);
        }
    </style>
    <script language="javascript" type="text/javascript">
        window.onload = function(){
            var bodyHeight =$(document.body).height() ;//获取文档的的高度
            var windowHeight = $(window).height();     //获取窗口的的高度
            var footer = document.getElementById("footer");


            if(windowHeight>bodyHeight ){  //文档高度小于窗口高度时，给footer绝对定位。position:absolute;bottom:0;
                footer.style.position = "absolute";
                footer.style.bottom = "0"
            } else {
                footer.style.positon = "";
                footer.style.bottom = "";
            }
        }
    </script>
</head>
<body>
    <div class=" header" >头头头头头头头头头头头头头</div>
    <div class=" content">身身身身身身身身身身身身身</div>
    <div class=" footer" id="footer" >脚脚脚脚脚脚脚脚脚脚脚脚脚</div>
</body>
</html>