100vh布局下内容溢出问题咨询

我完全明白你遇到的这个困扰——滚动到footer后缩小视口，section内容就会和footer重叠，本质问题出在.full-screen用了固定的height:100vh：当视口高度降低时，这个容器的高度会跟着缩水，但里面section的内容高度并没有随之调整，最终导致内容溢出到footer区域。

结合你要求的「保持现有布局结构（footer默认不可见，需滚动查看）」，这里有一个精准的解决方案：

修改后的代码实现 #

CSS 部分 #

.full-screen { 
  min-height: 100vh; /* 替换height为min-height，确保容器至少占满视口，内容过多时自动撑开 */
  background-color: lightgrey; 
  width: 100%; 
  display: flex; /* 使用Flex布局实现弹性垂直排列 */
  flex-direction: column;
}
.the-whole{}
header{ 
  height: 90px; 
  background-color: lightgreen; 
  width: 100%; 
  flex-shrink: 0; /* 固定header高度，防止被压缩 */
}
section { 
  margin-top:20px; 
  min-height: 120px; 
  width: 100%; 
  background-color: lightyellow; 
  flex-grow: 1; /* 让section自动填充容器的剩余空间 */
}
footer{ 
  height: 90px; 
  width: 100%; 
  background-color: lightsalmon; 
  flex-shrink: 0; /* 固定footer高度，防止被压缩 */
}

HTML 部分（无需修改） #

<div class="the-whole">
  <div class="full-screen">
    <header> head </header>
    <section> section <br/><br/><br/><br/><br/><br/><br/><br/> quite the sight </section>
  </div>
  <footer> footer </footer>
</div>

方案原理说明 #

1. 核心改动：min-height:100vh替代height:100vh：它保证容器至少占满当前视口高度，同时当section内容超过视口剩余空间时，容器会自动被内容撑开，不会限制内容的高度，从根源避免了内容溢出的问题。
2. Flex布局优化垂直空间分配：通过display:flex和flex-direction:column让header和section垂直分布，配合flex-grow:1让section自动填充header之外的剩余空间，既满足默认占满视口的需求，又能在内容过多时自适应扩展。
3. 固定关键元素高度：给header和footer添加flex-shrink:0，确保它们的高度不会因为容器空间不足而被压缩，维持布局的稳定性。

这个方案完全匹配你的需求：footer默认处于视口外需要滚动查看，当缩小视口高度时，footer会始终紧跟在.full-screen容器的底部，不会和section内容发生重叠，也不会出现多余的滚动条。

内容的提问来源于stack exchange，提问作者arso