2016年12月15日 星期四

自動Footer高度並置底的方法

終於.....解決了這個問題
最終還是靠JS啊～

不囉嗦！上語法！

HTML：
<body>
    <header>header</header>
    <main>main content</main>
    <footer>footer</footer>
</body>
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%;}
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");
        } else {
            $("footer").removeClass("fixed-bottom");
        }
    }
    footerPosition();
    $(window).resize(footerPosition);
});
轉載自：segmentfault

張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)