將頁腳保留在網站的底部。（不是pos：固定的）

在我的上，當頁面中沒有足夠的內容時，我在將頁面中的頁腳保持在最底部時遇到問題。我已經google搜索，在YouTube上搜索csstricks等。但總是有相同的「解決方案」; 但不適合我的網頁。現在我在這裏尋求幫助。將頁腳保留在網站的底部。（不是pos：固定的）

我想要的是this。我真的很感激一個很好的解決方案。

您的真誠。 Mike

來源

2016-01-30 Mike Kaufmann

鏈接的解決方案有什麼問題？ – jcaron

@jcaron這是一種可怕的舊方法，不適用於高度可變的頁腳。 – seahorsepip

您可以簡單地從鏈接實現代碼。鍵是：

固定頁腳高度，並且如果需要具有它絕對向下定位bottom: 0一個相對定位元件
內容底部填充，等於頁腳高度，以便內部推動它

因此，對於你的網站，你需要添加以下內容：

html { 
    height: 100%; 
} 

body { 
    position: relative; 
    min-height: 100%; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
    height: 35px; 
    width: 100%; 
} 

.content { 
    padding-bottom: 60px; 
}

只需在您的網站上進行測試，並將其附加到您的style.css文件中即可。

來源

2016-01-30 01:36:52 Shomz

這是一種可怕的方法，因爲頁腳不能再有一個變化的高度：/ – seahorsepip

如果高度是以ems或百分比的形式設置的，它可能會發生。沒有任何東西阻止任何人使用。 – SEFL

@seahorsepip，可怕與否，如果你想要一個絕對定位的頁腳，它是**的方式。 – Shomz

將腳註移到內部，否則無效。您也可以使用flex來簡單地拉伸內容以填充屏幕上留下的空間：

body { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 
#content { 
    flex: 1; 
}

爲什麼要使用此方法？簡單，頁腳不需要這種特定的高度，如果需要，它可以在高度上變化。

來源

2016-01-30 01:37:24 seahorsepip

如果你按照你提供的例子，你會發現html和body標籤都有高度屬性設置爲100％，包裝div有100％的最小高度，並設置爲相對。

允許示例中的頁腳div完全位於包裝div的底部，這也恰好是頁面的底部。

如果您有Chrome，請打開DOM檢查器，然後按順序選擇html或body標籤（您的選擇），包裝器div和頁腳div。

來源

2016-01-30 01:37:34 SEFL

我已經嘗試過了，但它似乎不起作用。 –

你可以在你嘗試過的地方創建另一個頁面嗎？稱之爲work3.html或類似的東西。也許有些東西是錯誤的，或者你忘記了我們可以用新鮮的眼睛看到。我沒有在work2.html頁面中看到它。 – SEFL

將頁腳保留在網站的底部。 （不是pos：固定的）

回答

相關問題

將頁腳保留在網站的底部。（不是pos：固定的）