HTML页脚始终固定在底部

电玩女神 2021-06-11 15:12 1545阅读 0赞

###### 页脚固定在底部分两种情况考虑，一种是有滑动栏的情况，一种是没有的。后者比较简单，直接加上定位属性就是了，但是在页面内容是扩充整个页面以至于可以下滑浏览时，这时候单纯加上定位属性就不那么可行了，鉴于此我写了一个通用的js方法帮我搞定所有可能页脚固定的情况。 ######

###### 废话不多说，直接来干货 ######

<!DOCTYPE html>
    <html>
    <head>
    <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      vertical-align: middle;
      display: inline-block;
      float:left;
      text-align: center;
    }
    .footer{
      height: 50px;
      width: 80%;
      background:#111;
      color:white;
    }
    </style>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    </script>
    <script>
    $(document).ready(function(){
    function t(){
    var e = $(".footer");//获取页脚div的对象
    var h = e.offset().top + e.height() ;//获取页脚偏移量加页脚高度的值
    //判断页脚div底部到页面顶端的实际距离是否小于页面可见区域高度
    if(h < document.body.clientHeight){
    //当页面刚好可以包容所有内容不需要下拉时直接加上个定位就是了，当然这里也可以用绝对和相对属性
    //具体设置根据你实际情况来定吧
      $(".footer").css({position:"fixed",left:"20%",bottom:"0px"});
      return;
    }
    
    function t2(){
      var a = $(document).scrollTop()+document.documentElement.clientHeight;//获取页面滑动偏移量加页面可见区域的高度
    //判断页脚div底部到页面顶端的实际距离是否小于页面滑动偏移量加页面可见区域高度
    if(a >= h){
    //如果页面内容太多，需要下滑展示的时候，给页脚一个固定定位属性
    $(".footer").css({position:"fixed",left:"20%",bottom:"0px"});
    }else{
    //当页面重新上滑页脚需要被隐藏的时候移除它的定位属性，这样不论何时，它肯定是被页面撑起来固定到底部展示的。
     $(".footer").removeAttr("style");
    }
    }
    t2();
    //在页面大小改变时触发方法t2
     $(document).resize(t2);
     //在页面滑动时触发方法t2
     $(document).scroll(t2);
    }
    //直接运行方法t
    t();
    
    });
    </script>
    </head>
    <body>
    <div style='height:1500px;width:20%;background:blue;'><span style="line-height: 500px;color:white;">左侧导航栏</span></div>
    <div style='height:80px;width:80%;background:#ccc;'><span style="line-height: 80px;">这是一个页头</span></div>
    <div style='height:300px;width:30%;background:#AAA;'></div>
    <div style='height:150px;width:30%;background:#dda;'></div>
    <div style='height:150px;width:30%;background:#bbb;'></div>
    <div style='height:900px;width:80%;background:#eee;'></div>
    <div class='footer'><span style="line-height: 50px;">这是一个页脚</span></div>
    </body>
    </html>

###### 显示效果为 ######

![在这里插入图片描述][70]  
![在这里插入图片描述][70 1]

*本代码仅供参考，如有漏洞之处,欢迎指出。*

[70]: /images/20210606/13c3104962a84309960b14e5ee4adb11.png
[70 1]: /images/20210606/0e664879f49b465792f477e1eda28a6d.png