将HTML的页脚固定在屏幕下方 

/*********************************************************************
 *                 将HTML的页脚固定在屏幕下方
 * 说明：
 *     处理的方法好像是比较多的，个人还是比较倾向于用JS进行处理。
 *
 *                                   2017-8-25 深圳 龙华樟坑村 曾剑锋
 ********************************************************************/

一、参考文档：
    1. 将footer固定在页面底部的实现方法
        https://segmentfault.com/a/1190000004453249

二、采用代码：
    1. HTML：
        <body>
            <header>header</header>
            <main>main content</main>
            <footer>footer</footer>
        </body>
    2. CSS：
        html,body{margin:0;padding: 0;}
        header{background-color: #ffe4c4;}
        main{background-color: #bdb76b;}
        footer{background-color: #ffc0cb;}

        /* 动态为footer添加类fixed-bottom */
        .fixed-bottom {position: fixed;bottom: 0;width:100%;}
    3. JS：
        $(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");
                }
            }
            footerPosition();
            $(window).resize(footerPosition);
        });

 

posted on 2017-08-25 11:44  zengjf  阅读(976)  评论(0)    收藏  举报

导航