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

最新推荐文章于 2024-07-28 20:27:10 发布

z-pan

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量77

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ztseven/p/3979083.html

版权

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

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);
}

转载于:https://www.cnblogs.com/ztseven/p/3979083.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

z-pan

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页脚保持在未满屏页面的底部

最近有这样一个需求，就是说在页面内容不够丰富的情况下，我们得让页脚始终保持在页面的底部。bala,bala。。。在网上寻觅了一下，最终还是赏识用js解决的这款。不闲扯，贴码showhtml部分<body><div id="top">top</div><div id="bottom">bottom</div>...
复制链接

扫一扫