码迷,mamicode.com
首页 > 其他好文 > 详细

页脚保持在未满屏页面的底部

时间:2014-09-18 14:38:43      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   java   ar   div   sp   

最近有这样一个需求,就是说在页面内容不够丰富的情况下,我们得让页脚始终保持在页面的底部。

bala,bala。。。

在网上寻觅了一下,最终还是赏识用js解决的这款。

不闲扯,贴码show

html部分

<body>
<div id="top">top</div>
<div id="bottom">bottom</div>
</body>

css部分

*{
    margin:0;
    padding:0;
}
#top{
    background:#33CCFF;
    text-align:center;
}
#bottom{
    background:#FFCC00;
    text-align:center;
    width:100%;
}

 javascript部分

function calcDistance(){
    var topHeight = document.getElementById("top").scrollHeight;
    var bottomHeight = document.getElementById("bottom").scrollHeight;
    var allHeight = document.documentElement.clientHeight;
    var bottom = document.getElementById("bottom");
        if((topHeight + bottomHeight) < allHeight){
        bottom.style.position = "absolute";
        bottom.style.bottom = "0";
        }else{
        bottom.style.position = "";
        bottom.style.bottom = "";
        }
    setTimeout(function(){calcDistance();},10);
}

 

页脚保持在未满屏页面的底部

标签:style   blog   color   io   os   java   ar   div   sp   

原文地址:http://www.cnblogs.com/ztseven/p/3979083.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!