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

标签：ber   ref   padding   20px   屏幕分辨率   高度   containe   ott   ring   

在设计网站的时候，如果你某个页面的内容没有满屏，那你的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固定在浏览器底部

标签：ber   ref   padding   20px   屏幕分辨率   高度   containe   ott   ring   

原文地址：http://www.cnblogs.com/MarchThree/p/6240654.html