爲什麼頁腳不在底部

我有一個我正在工作的網站。我想讓頁腳堅持頁面的底部。所以我跟着一個簡單的指南，基本上這樣做：爲什麼頁腳不在底部

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
    position: relative; 
    padding-bottom: $footer-height + $footer-margin-top; 
} 

.footer { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    height: $footer-height; 
}

這似乎在開始工作。然後，我進入了一個舞臺，其內容超過了觀看端口的高度，這是當事物停止工作時。

如果你看this你可以看到頁腳在頁面的底部。如果你看this，頁腳位於視口的底部。我知道這是一個簡單的修復，但我無法弄清楚。請有人可以幫我一把。

來源

2016-08-15 r3plica

變化'位置：absolute'爲'.footer'到'位置：fixed' –

https://codepen.io/cbracco/pen/zekgx 看一看的鏈接，這將是excatly什麼你要！ –

Sanket，這是我所遵循的確切教程，但由於某種原因，我的網站無法正常工作。 – r3plica

您希望您的頁腳在頁面底部粘除非body內容是足夠大，它出現在滾動後？

如果是這樣，你應該設置你的身體標記height: auto;，所以如果它超過100%組上你的min-height規則，它考慮到並推向底部的頁腳。

讓我知道這是否是您的預期行爲。

來源

2016-08-15 15:49:55

是的，那正是我想要的。我知道這將是簡單的:) – r3plica

不起作用。如果html設置爲auto，那麼當內容大於視圖區域時，它會將頁腳置於底部。如果內容小於視圖區域，則它僅位於內容的底部（我需要它位於視圖區域的底部） – r3plica

您是否在談論視圖底部的頁腳？克萊德已經回答了它。你需要固定定位。 – Vcasso

變化 position:absolute爲.footer到position: fixed

來源

2016-08-15 15:46:55

.footer { 
    position: static; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    height: $footer-height; 
}

來源

2016-08-15 16:12:48

爲什麼頁腳不在底部

回答

相關問題