网站设计:将Footer固定在浏览器底部

最新推荐文章于 2023-03-20 21:10:20 发布

weixin_34127717

最新推荐文章于 2023-03-20 21:10:20 发布

阅读量178

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MarchThree/p/6240654.html

本文介绍了使用JavaScript和CSS将网站页脚固定在浏览器底部的几种方法。通过调整元素高度和定位，确保无论内容多少，页脚始终位于底部。

在设计网站的时候，如果你某个页面的内容没有满屏，那你的footer会离浏览器底部很远，整体看起来很难看，这里用JavaScript提供一种方法来将footer固定在浏览器底部。

function fixFooter(){
    var mainHeight = document.getElementById('main').offsetHeight;
    var height = document.documentElement.clientHeight
                         - document.getElementById("header").offsetHeight
                         - document.getElementById("footer").offsetHeight;
    if(mainHeight < height ){
        document.getElementById('main').style.height= height + "px";
    }
}

其中，main是你网页内容的id，header是菜单的id,footer是footer的id。当网站内容的高度小于多少时，那么获取header和footer的高度，并用document.documentElement.clientHeight减去他们，剩下的就是main的高度。
　　但是当你运行代码的时候，你会发现footer先是离底部有点距离，然后才到底部的，这样看起来很难看，可以加上下面语句隐藏这个过程，使得网页一打开footer就在底部。

document.getElementById('main').style.overflow="hidden";

我们可以通过JavaScript获取很多关于浏览器的属性，这里列出各个属性的获取及其含义。
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

当然，如果你想让footer一直在浏览器底部，那么可以通过CSS来解决

   #footer{
  
   position
   : 
   fixed
   ;
  
   right
   : 
   0
   ;
  
   left
   : 
   0
   ;
  
   z-index
   : 
   1030
   ;
  
   bottom
   : 
   0
   ;
  
   margin-bottom
   : 
   0
   ;
  
   }
  
   这样footer会一直在浏览器底部。 
   　　这里再提供一种方法：完全通过css达到的。

     <
     footer 
     class
     =
     "footer"
     >
    
     <
     div 
     class
     =
     "container"
     >
    
     <
     p 
     class
     =
     "text"
     >版权所有，翻版不究! https://www.iteblog.com</
     p
     >
    
     </
     div
     >
    
     </
     footer
     >
    
     下面是css：
    
       html {
      
       position
       : 
       relative
       ;
      
       min-height
       : 
       100%
       ;
      
       }
      
       body {
      
       margin-bottom
       : 
       60px
       ;
      
       }
      
       .footer {
      
       position
       : 
       absolute
       ;
      
       bottom
       : 
       0
       ;
      
       width
       : 
       100%
       ;
      
       height
       : 
       60px
       ;
      
       background-color
       : 
       #f5f5f5
       ;
      
       }
      
       .container {
      
       width
       : 
       auto
       ;
      
       max-width
       : 
       680px
       ;
      
       padding
       : 
       0 
       15px
       ;
      
       }
      
       .container .text {
      
       margin
       : 
       20px 
       0
       ;
      
       }