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


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

    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);
    }
  • 相关阅读:
    Redis详解
    Redis详细介绍
    memcache数据组织
    memcache细节解析
    memcached命令和配置
    PHP的Cookie、Session和跟Laravel相关的几点了解
    Session机制
    Cookie和Session详解
    Apache的Directory配置指南
    [C语言](二)01 获取Windows图形构件大小信息
  • 原文地址:https://www.cnblogs.com/ztseven/p/3979083.html
Copyright © 2020-2023  润新知