HTML page: Overflow of a 100vh

May 9, 2022

I have a page with a header and a section on a 100vh, and a footer on the rest (so you have to scroll to see it).

The problem is that if I scroll on the footer, and reduce the viewport height (by reducing the screen), the section content overflows on the footer …

Here’s an example:

.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>

Scroll on the footer, then reduce the whole window size, and the "it’s quite the sight" text should overlap on the footer at one point.

I want the footer to not go through the section (or maybe it’s the other way around). Ideally, when the screen reduces, there’s a moment where the footer stickon the end of the section, and the page stays this height.

I’ve tried using margin on the footer, setting a min-height on .the-whole class. An overflow-y:scroll on .full-screen works but I get 2 scrollbars which is not acceptable.
I need to keep the screen as-is (footer and section in visible, but not footer).

Any ideas ?

>Solution :

Change the .full-screen height to min-height, still set to 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>