详解HTML5将footer置于页面最底部的方法(CSS+JS)

本文介绍了详解HTML5将footer置于页面最底部的方法(CSS+JS)，分享给大家，具体如下：

JavaScript:

script tyPE="text/javascript">
    $(function(){
        function footerPosITion(){
                $("footer").removeClass("fixed-bottom");
                    //网页正文全文高度                VAR contentHeight = document.body.scrollHeight,                //可视窗口高度，不包括浏览器顶部工具栏                winHeight = window.innerHeight;
                if(!(contentHeight >
 winHeight)){
                    //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom                $("footer").addClass("fixed-bottom");
            }
 else {
                    $("footer").removeClass("fixed-bottom");
            }
        }
            footerPosition();
            $(window).resize(footerPosition);
    }
    );
    /script>
    

CSS:

.fixed-bottom {
        position: fixed;
        bottom: 0;
        width:100%;
}
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！