讓footer固定在頁(yè)面（視口）底部

Lemon_95 發(fā)布于2019-08-28 18:26 / 723人閱讀

摘要：讓固定在頁(yè)面視口底部這是一個(gè)讓網(wǎng)站固定在瀏覽器頁(yè)面內(nèi)容小于瀏覽器高度時(shí)頁(yè)面底部的技巧。如何通過(guò)用讓固定在頁(yè)面頂部。負(fù)外邊距應(yīng)該與的整體高度相等包括。沒(méi)有內(nèi)容會(huì)超出和的標(biāo)簽，除非超出內(nèi)容是通過(guò)的絕對(duì)定位。

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

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

如何通過(guò)用CSS讓Footer固定在頁(yè)面頂部。

在樣式表單里添加下面幾行CSS代碼。.wrapper 的負(fù)外邊距與 .footer 和 .push 的高度相等。負(fù)外邊距應(yīng)該與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 結(jié)構(gòu)。沒(méi)有內(nèi)容會(huì)超出 .wrapper 和 .footer 的 div 標(biāo)簽，除非超出內(nèi)容是通過(guò)CSS的絕對(duì)定位。另外，.push 的 div 標(biāo)簽也不應(yīng)該含有內(nèi)容，畢竟它是作為一個(gè)將footer“推”下去的隱藏元素。否則會(huì)與footer的內(nèi)容重疊。


    
        
    
    
        
            Your website content here.
            
        
        
            Copyright (c) 2008

多列布局（通過(guò)浮動(dòng)）

為 .push div 添加 clear 屬性。

.footer, .push {
    clear: both;
}

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

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

因?yàn)镮E6是考慮元素內(nèi)容的尺寸，而不是元素本身尺寸。在符合標(biāo)準(zhǔn)的瀏覽器中，如果元素的內(nèi)容太大，它只會(huì)超出框之外。但是在IE6中，如果元素內(nèi)容太大，則整個(gè)元素就會(huì)擴(kuò)展(包括寬和高)。即設(shè)定的width表現(xiàn)得像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/