App下載

如何將html5中的footer標(biāo)簽置于頁面最底部？底部頁面布局案例分享！

猿友 2021-07-17 10:07:29 瀏覽數(shù) (3805)
反饋

今天我們來講講：“如何將html5中的footer標(biāo)簽置于頁面最底部？”這個問題，下面是整理的相關(guān)內(nèi)容和代碼，希望對大家的學(xué)習(xí)和了解有所幫助！

 具體如下：

JavaScript:

<script type="text/javascript">
    $(function(){
        function footerPosition(){
            $("footer").removeClass("fixed-bottom");
                //網(wǎng)頁正文全文高度
                var contentHeight = document.body.scrollHeight,
                //可視窗口高度，不包括瀏覽器頂部工具欄
                winHeight = window.innerHeight;
            if(!(contentHeight > winHeight)){
                //當(dāng)網(wǎng)頁正文高度小于可視窗口高度時，為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%;
}

那么通過這篇文章小伙伴們都知道了：“如何將html5中的footer標(biāo)簽置于頁面最底部？”這個問題分享，那么如果你有其他的方法也可以和大家分享你的方法，更多有關(guān)于html5的相關(guān)知識和內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解更多的內(nèi)容。 


HTML5

0 人點(diǎn)贊