footer页面布局

资深bug开发工程师

于 2022-06-27 16:41:33 发布

阅读量325

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/Sple_xiaom/article/details/125487121

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .footer{
               font-size:15px;
               text-align:center;
               width:100%;
               position:fixed;
               bottom:0px;
               margin:7px 0px;
           }
           .footer p{
               color:#808080;
               margin:5px 0px;
           }
       </style>
   </head>
   <body>
       <div class="footer">
           <p>##################</p>
           <p>电话：###########</p>
       </div>
   </body>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
   <script type="text/javascript">
       var olbHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
       // navigator.userAgent.indexOf用来判断浏览器类型
       var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
       if (isAndroid) { // 如果是安卓手机的浏览器
           window.addEventListener("resize", function() {
               var newHeight = window.innerHeight
                       || document.documentElement.clientHeight
                       || document.body.clientHeight;
               if (olbHeight > newHeight) {
                   $(".footer").hide();
               } else {
                   $(".footer").show();
               }
           });
       }
       //window.onresize = function () {
       // var h = $(window).height();
       // //console.log(h+','+window.screen.availHeight)
       // var u = navigator.userAgent;
       // if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
       // if(h <= window.screen.availHeight/2){
       // $(".footer").hide();
       // }else{
       // $(".footer").show();
       // }
       // }
       //}
   </script>
</html>