Web前端开发处理页脚保持在页面底部

手游前端开发需要掌握|软件开发前端和后端的区别|麦子学院 web前端开发视频

html 代码

<style>
    * {
        margin: 0;
        padding: 0
    }
    #container {
        background: #33CCFF
    }
    #footer {
        background: #FFCC00;
        width: 100%;
    }
</style>
<div id=”container”> 5416416410</div>
<div id=”footer”>bottom</div>
<script language=”JavaScript” type=”text/javascript”>
    function test() {
        var infoHeight = document.getElementById(“container”).scrollHeight;
        var bottomHeight = document.getElementById(“footer”).scrollHeight;
        var allHeight = document.documentElement.clientHeight;
        var bottom = document.getElementById(“footer”);
        if ((infoHeight + bottomHeight) < allHeight) {
            bottom.style.position = “absolute”;
            bottom.style.bottom = “0”;
        } else {
            bottom.style.position = “”;
            bottom.style.bottom = “”;
        }
        setTimeout(function () { test(); }, 10);
    }
    test();
</script>

微信web前端开发工具网盘|零基础 前端开发视频|视频项目前端开发管理

» 本文来自:前端开发者 » 《Web前端开发处理页脚保持在页面底部》
» 本文链接地址:https://www.rokub.com/4918.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!