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

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

 具體如下：

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%;
}

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