HTML 页面:溢出 100vh

HTML page: Overflow of a 100vh

我有一个页面有一个 header 和一个 100vh 的部分,其余部分有一个页脚(所以你必须滚动才能看到它)。

问题是,如果我在页脚上滚动并降低视口高度(通过减小屏幕),部分内容会在页脚上溢出...

这是一个例子:

.full-screen {
  height: 100vh;
  background-color: lightgrey;
  width: 100%;
}
.the-whole{} 
header{
  height: 90px;
  background-color: lightgreen;
  width: 100%;
}
section {
  margin-top:20px;
  min-height: 120px;
  width: 100%;
  background-color: lightyellow;
}
footer{
  height: 90px;
  width: 100%;
  background-color: lightsalmon;
}
<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>

在页脚上滚动,然后缩小整个 window 大小,“非常漂亮”文本应该在一处重叠在页脚上。

我希望页脚不穿过该部分(或者相反)。理想情况下,当屏幕缩小时,页脚会粘在该部分的末尾,并且页面会保持这个高度。

我试过在页脚上使用 margin,在 .the-whole class 上设置 min-height.full-screen 上的 overflow-y:scroll 有效,但我得到 2 个滚动条,这是不可接受的。 我需要保持屏幕 as-is(页脚和部分可见,但页脚不可见)。

有什么想法吗?

.full-screenheight改成min-height,还是100vh:

.full-screen {
  min-height: 100vh;
  background-color: lightgrey;
  width: 100%;
}
.the-whole{} 
header{
  height: 90px;
  background-color: lightgreen;
  width: 100%;
}
section {
  margin-top:20px;
  min-height: 120px;
  width: 100%;
  background-color: lightyellow;
}
footer{
  height: 90px;
  width: 100%;
  background-color: lightsalmon;
}
<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>