获取内容滚动页面的其余部分

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;。这将确保页脚保持在该位置，而不管页面的垂直滚动。