zoukankan      html  css  js  c++  java
  • 页脚保持在未满屏页面的底部

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

    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);
    }
  • 相关阅读:
    08--Docker安装Mysql
    第三天
    html---Keymaker-EMBRACE
    解析selenium http://blog.csdn.net/java2000_net/article/details/3721706
    selenium
    day4复习
    函数
    列表
    int整数和bool值
    字符串方法整理
  • 原文地址:https://www.cnblogs.com/ztseven/p/3979083.html
Copyright © 2011-2022 走看看