CSS：具有全高內容DIV的粘性頁腳

Question

我正在嘗試將Bootstrap粘性頁腳與全高內容DIV結合起來。 在CSS Tricks網站上似乎已經回答了這個問題，但是jurotek提出的解決方案似乎已被刪除。

我之前曾問過這個問題 ，但我想提供了一個解決方案，但經過仔細檢查，發現它不起作用。

問題在於，全尺寸的DIV在所有祖先上都要求height：100％，但是頁腳的粘性意味着您無法在HTML元素上擁有此屬性。 因此發生沖突。

我將使用視口的高度在CSS中使用calc（）進行調查，看看是否可行。

如果您能提供幫助，我將不勝感激。 有任何想法嗎？

Answer 1

如果要讓div滾動額外的內容，可以這樣做：

 body { width: 100vw; height: 100vh; margin: 0px; } #content { height: calc(100% - 30px); background: gold; overflow-y: auto; } #footer { height:30px; background: tomato; } 

 <div id=content> content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br> </div> <div id=footer>footer text.</div> 

Answer 2

您是否嘗試過使用新的CSS3視口高度和視口寬度單位？

通常，當我使用動態內容時，即...按高度動態時，我會遇到這些錯誤。 我可能建議height: 100vh;玩耍height: 100vh; 或width: 100vw; 看看是否有幫助。

我看不到您當前的代碼（僅來自您在SO中的舊帖子中的代碼），因此我無法提供啟發式或更好的解決方案。

Answer 3

如果您希望頁腳與頁面內容一起滾動，則可以使用flex div：

 body { height: 100vh; width:100%; margin:0px; } #container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; flex-direction: column; min-height:100%; } #A { flex: 0 0 30px; } #B { flex: 1 1 auto; } #C { flex: 0 0 30px; } 

 <div id="container"> <div id=A style="background-color:gold;">header</div> <div id=B style="background-color:tomato;"> text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br> text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br> </div> <div id=C style="background-color:gold;">footer</div> </div>