使身體佔據

Question

滾動頁面

的100％我有一個HTML頁面

html,body{ height: 100%; } 

但我有比它可以適應100％的頁面內容比較多，所以垂直滾動條。這很好，但在</body>之前，我有一個<footer>Some text</footer>。我的問題是，頁腳出現在屏幕中間，即使它應該顯示在頁面的最底部。我檢查了，沒有margin適用於任何元素，將推動在身體高處的頁腳。

對我而言，奇怪的是，當我使用Chrome開發人員工具檢查頁面時，它顯示了身體覆蓋的區域不是可滾動區域的100％。如果沒有滾動條，則此區域爲頁面的100％。

我無法提供標記，這是一個傳統的ASP.Net應用程序，它很混亂。

Answer 1

嘗試min-height: 100%改爲。在html和body上。此外，它似乎頁腳是絕對定位，但最小高度應該解決這個問題。

如果它以後沒有，然後將填充底部應用於身體，並增加它，直到頁腳是你想要的地方。

Answer 2

這取決於你想如何解決這個問題。如果你知道該網頁將永遠是比內容更短，你可以向下移動頁腳底部有：

footer { 
    position: absolute; 
    bottom: 0; 
} 

或者這是Flexbox的任務（前提是你可以刪除舊的瀏覽器）。像這樣的應該做的伎倆：

body { 
    display: flex; 
    flex-direction: column; 
} 
.main { 
    flex-grow: 1; 
}