粘性頁腳在100％高度的網站上

我試圖在頁面上粘貼頁腳，每個標籤都帶有100％高度。我的問題是，如果內容比顯示更大，並向下滾動，頁腳不再位於頁面的底部。頁腳保持在這樣的位置：Picture of the footer 粘性頁腳在100％高度的網站上

下面是一個例子：（對不起，這是錯誤的鏈接。） http://jsfiddle.net/qt3m1p4c/

<html style:"height: 100%"> 
    <body style:"height: 100%"> 
     A lot of Content 
    </body> 
    <footer style:"position: absolute; bottom: 0;"> 
     Sticky Footer 
    </footer> 
</html>

是否有人沒有如何解決這個問題，無需拆卸heigth屬性？

來源

2017-06-04 Marco Göpfrich

位置：固定爲頁腳。 – Gerard

您需要設置的位置是：固定您的頁腳，這意味着無論你在網頁上發生，該元素將站在同一個地方，here your code with changed position

.footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background:#ccc; 
}

來源

2017-06-04 16:37:56

但是現在頁腳正前方的一些文字.. –

@MarcoGöpfrich是的，要解決這個問題，指定一些高度到你的頁腳，並添加填充等於這個值你的包裝:) –

把頁腳裏面的內容包裝和改變CSS如下：

.pageContentWrapper { 
    padding-bottom:100px; 
    min-height: 100%; 
    position: relative; 
    box-sizing: border-box; 
} 
.footer { 
    position: absolute; 
    [...] 
}

這裏的一個小提琴：（EDITED，忘了在第一添加box-sizing: border-box;）：http://jsfiddle.net/uc6y5dhs/1/

來源

2017-06-04 16:41:57 Johannes

粘性頁腳在100％高度的網站上

回答

相關問題