粘性頁腳不能正常工作

我想做一個粘性頁腳，就像我在這個例子中做的那樣。 http://codepen.io/Kenny94/pen/JvtFs 粘性頁腳不能正常工作

html, body { 
     height: 100%; 
     width:100%; 
     padding: 0; 
     margin: 0; 
     position: relative; 
    } 

    div { 
     font-size: 30px; 
     min-height:100%; 
     margin-bottom:60px; 
     background: red; 
    } 

    footer { 
     background:green; 
     height: 60px; 
     position: fixed; 
     bottom: 0; 
     left: 0; 
     Right: 0; 
     z-index: -1; 
    }

問題是，它並沒有在我的當前項目的工作權利。它在身體後面設置頁腳，但是如果我開始滾動它就會出現。如果我用鉻色來觀察身體的大小，它的高度是970px，但是由於這個帖子，整個網站要大得多。在我看來，這個機構並沒有像Blog Post Wrapper那樣擴展。我在身體中將BG顏色設置爲灰色，並填充整個頁面。我不知道爲什麼它不能在身高100％的情況下工作。我可以將高度設置爲4000px以適應內容和其他所有內容，但這不是真正的解決方案。

來源

2014-07-15 Kenny

您可以添加'html'代碼。我們需要更多信息，以便我們能夠更好地幫助您。 – rob

您不需要在html標籤或body標籤上設置高度。它將與內容一起流動。您將主div的最小高度設置爲100％。當視圖被加載時，這將佔用剩餘空間的剩餘空間，將頁腳從屏幕上推出。您可以更改主div的高度，也可以將頁腳位置固定在屏幕底部，如果您希望它粘到屏幕底部。

來源

2014-07-15 21:48:03 dsum27

我不完全確定你要達到的目標。

- 如果你想知道爲什麼頁腳置於身體後方，那是因爲你設置 z-index to -1. 所以解決將是這樣的：http://jsfiddle.net/bmpy6/

- 如果你不想滾動時有可見它（也就是說，始終將它固定在底部），這應該是你想要的：http://jsfiddle.net/bmpy6/1/

爲此，你省略了position: fixed;。

來源

2014-07-15 21:48:28 tinthetub

變化：

footer { 
     background:green; 
     height: 60px; 
     position: fixed; 
     bottom: 0; 
     left: 0; 
     Right: 0; 
     z-index: -1; 
    }

要：

footer { 
     background:green; 
     height: 60px; 
     position: fixed; 
     bottom: 0; 
     left: 0; 
     Right: 0; 
     z-index: 1; 
    }

只是改變了的z-index將帶給您的頁腳的前面。請記住，Z-索引基本上使您的ID和班級的可見性優先於彼此。

來源

2014-07-15 21:56:12 DolbyOver

根本不需要設置高度。試試這個：

div { 
    font-size: 30px; 
    margin-bottom:60px; 
    background: red; 
    }

相反的：

div { 
     font-size: 30px; 
     min-height:100%; 
     margin-bottom:60px; 
     background: red; 
    }

你看，當你告訴頁面有100％的高度，你告訴它填補了屏幕高度的100％。當你刪除高度時（在這種情況下，它是最小高度，因此如果需要，它將展開），<div>擴展到保存內容所需的高度。
See this JSFiddle for a working example
希望這有助於！

來源

2014-07-15 22:05:46

粘性頁腳不能正常工作

回答

相關問題