獲取內容滾動頁面的其餘部分

Question

我想讓我的內容與容器div一起展開，但取而代之的是它被切斷。

這裏是我的HTML代碼：

<div id="container"> 
<section> 
Lots of content goes here 
</section> 
</div> 
<div class="footer">Footer Content</div> 

我的CSS代碼：

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

body { 
    width: 100%; 
    height: 100%; 
    background: #ECECEC; 
    overflow: auto; 
} 

#container { 
    width: 80%; 
    margin: 0 auto; 
    background: white; 
    height: 100vh; 
} 

section { 
    overflow: auto; /* Trying to make content scrollable */ 
} 

.footer { 
      width: 100%; 
      position: absolute; 
      left: 0; 
      bottom: 0; 

} 

頁腳底部出現重疊內容的一部分。我一直在尋找答案，看起來頁腳的位置可能會導致這個問題。有沒有一種方法可以讓容器在容器div中展開，並且在我的情況下繼續將頁腳放在底部？

Answer 1

有兩個問題與CSS：

1. 您應該使用min-height: 100vh;爲#container。這表示身高至少應該是'100vh'，如果需要，身高應該會增長。
2. 對於.footer，您應該使用position: fixed;。這將確保頁腳保持在該位置，而不管頁面的垂直滾動。