javascript - 求助!!! Html Css Footer的設定

要求

• 1.網頁內容少時，footer再瀏覽器的底部，如

• 2.網頁內容多時，瀏覽內容時(未瀏覽到底部)footer不可見，如

• 3.網頁內容多時，瀏覽內容時(瀏覽底部)footer可見，如

回複內容：

要求

• 1.網頁內容少時，footer再瀏覽器的底部，如

• 2.網頁內容多時，瀏覽內容時(未瀏覽到底部)footer不可見，如

• 3.網頁內容多時，瀏覽內容時(瀏覽底部)footer可見，如

請搜尋sticky footer 有很多css就能做掉的方式 在能夠只顧支援flexbox的情況 我是用這個超清爽的方式 連結

將footer固定在頁面底部的實現方法

同求，之前採用 JS 動態計算，踩過不少坑。後來直接改為中間 content 設了個最小高度

footer: function() {        var footerHeight = 0,            footerTop = 0,            $footer = $(".footer");        positionFooter();        //定義positionFooter function        function positionFooter() {            //取到div#footer高度            footerHeight = $footer.height();            //div#footer離螢幕頂部的距離            footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";            /* DEBUGGING STUFF                console.log("Document height: ", $(document.body).height());                console.log("Window height: ", $(window).height());                console.log("Window scroll: ", $(window).scrollTop());                console.log("Footer height: ", footerHeight);                console.log("Footer top: ", footerTop);                console.log("-----------")            */            //如果頁面內容高度小於螢幕高度，div#footer將絕對位置到螢幕底部，否則div#footer保留它的正常靜態定位            if (($(document.body).height() + footerHeight) < $(window).height()) {                $footer.css({                    position: "absolute",                    top: footerTop,                });            } else {                $footer.css({                    position: "static"                });            }        }

bootsrap官網下面有一個外掛程式 好像是handroom（具體忘記了）用於固定header的，footer應該也可以

謝謝大家，問題解決了，方法有好多
但是我在html中用的margin太多了，導致頁面無法完美100%顯示⊙﹏⊙b汗
最後用padding加上sticky footer的方法解決了

參考1
參考2
參考3

JS根據document的scrollTop與document.height-window.height的差，改footer的position：是relative還是fixed；～

