讓footer固定在頁面（視口）底部

liaosilzu2007 發布于2019-08-01 14:57 / 3218人閱讀

摘要：讓固定在頁面視口底部這是一個讓網站固定在瀏覽器頁面內容小于瀏覽器高度時頁面底部的技巧。如何通過用讓固定在頁面頂部。負外邊距應該與的整體高度相等包括。沒有內容會超出和的標簽，除非超出內容是通過的絕對定位。

讓footer固定在頁面（視口）底部（CSS-Sticky-Footer）

這是一個讓網站footer固定在瀏覽器(頁面內容小于瀏覽器高度時)/頁面底部的技巧。由HTML和CSS實現，沒有令人討厭的hacks。所以這就能在所有主流瀏覽器上正常運行（甚至包括IE5和IE6）。

如何通過用CSS讓Footer固定在頁面頂部。

在樣式表單里添加下面幾行CSS代碼。.wrapper 的負外邊距與 .footer 和 .push 的高度相等。負外邊距應該與footer的整體高度相等（包括padding、border）。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* 如果你不需要考慮IE6，則可以把這行與下一行代碼刪除 */
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

按照此 HTML 結構。沒有內容會超出 .wrapper 和 .footer 的 div 標簽，除非超出內容是通過CSS的絕對定位。另外，.push 的 div 標簽也不應該含有內容，畢竟它是作為一個將footer“推”下去的隱藏元素。否則會與footer的內容重疊。


    
        
    
    
        
            Your website content here.
            
        
        
            Copyright (c) 2008

多列布局（通過浮動）

為 .push div 添加 clear 屬性。

.footer, .push {
    clear: both;
}

height:auto!important; 和 height:100%;屬性

這兩個屬性是為了在IE6及以下的瀏覽器實現 min-height 效果(min-height只兼容IE7及以上)。所以，當你不需要考慮IE6時，可把這兩個屬性刪除。

因為IE6是考慮元素內容的尺寸，而不是元素本身尺寸。在符合標準的瀏覽器中，如果元素的內容太大，它只會超出框之外。但是在IE6中，如果元素內容太大，則整個元素就會擴展(包括寬和高)。即設定的width表現得像min-width。

完整代碼：https://github.com/JChehe/CSS-Sticky-Footer/blob/master/CSS%20Sticky%20Footer.html
參考：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

GPU云服務器云服務器 footer頁面底部固定頁面底部頁面底部 php位于頁面底部

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/49677.html

讓footer固定在頁面（視口）底部

摘要：讓固定在頁面視口底部這是一個讓網站固定在瀏覽器頁面內容小于瀏覽器高度時頁面底部的技巧。如何通過用讓固定在頁面頂部。負外邊距應該與的整體高度相等包括。沒有內容會超出和的標簽，除非超出內容是通過的絕對定位。讓footer固定在頁面（視口）底部（CSS-Sticky-Footer）這是一個讓網站footer固定在瀏覽器(頁面內容小于瀏覽器高度時)/頁面底部的技巧。由HTML和CSS實現...

Lemon_95 2019-08-28 18:26 評論0 收藏0
Sticky Foolter 幾種實現方式

摘要：但如果網頁內容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。只需要幾行代碼就可以實現，而且像上面計算或添加額外的元素。 CSS實現Sticky Footer 什么是 Sticky Footer 所謂 Sticky Footer，并不是什么新的前端概念和技術，它指的就是一種網頁效果：如果頁面內容不足夠長時，頁腳固定在瀏覽器窗口的底部；如果內容足夠長時，頁腳固定在頁面的最底部。但如果網頁內...

張漢慶 2019-08-30 11:03 評論0 收藏0
Sticky Foolter 幾種實現方式

摘要：但如果網頁內容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。只需要幾行代碼就可以實現，而且像上面計算或添加額外的元素。 CSS實現Sticky Footer 什么是 Sticky Footer 所謂 Sticky Footer，并不是什么新的前端概念和技術，它指的就是一種網頁效果：如果頁面內容不足夠長時，頁腳固定在瀏覽器窗口的底部；如果內容足夠長時，頁腳固定在頁面的最底部。但如果網頁內...

PrototypeZ 2019-08-02 15:13 評論0 收藏0
緊貼底部的頁腳

摘要：這樣就可以了我們只需要四行簡單的代碼，就完美實現了緊貼底部的頁腳。后記上面是我總結的四種方法，如果還有什么更好的方法，歡迎共同探討參考資料總在底部的頁腳揭秘前言在寫前端頁面時，經常會遇到這種情況：有一個具有塊級樣式的頁腳，當頁面內容足夠長時它一切正常；有的時候，由于頁面長度不夠，頁面底部的頁腳會很尷尬的跑上來；頁腳不能像我們期望中那樣緊貼在視口的最底部，而是緊跟在內容的下方。那么...

greatwhole 2019-08-29 12:45 評論0 收藏0
css的結構與布局

摘要：實際上表示視口寬度的，而不是。同樣，表示視口高度的當視口寬度小于高度時，等于，否則等于。基于的方法這種應該算是最佳的解決辦法實現方法當使用布局時，使用在水平和垂直方向都會居中。 1.自適應內部元素在css中，不給元素一個height值時，元素會自適應其內部的元素高度，有時我們想讓元素的寬度也達到此效果，應用場景如下。如下當前的這種布局，想要改成最外層的div的寬度由當前的圖片撐開的...

GeekQiaQia 2019-08-29 12:25 評論0 收藏0