footer doesn't appear on bottom of page when using 100vh

Question

Description:

I have want to structure my website into several pages using following css:

.page {
    height: 100vh;
}

I add several pages to the website and on the last one I want a footer to appear on the bottom of the page, e.g.

.page {
  height: 100vh;
  background-color: cyan;
}

footer {
  position: relative;
  width: 100%;
  height: 100px;
  bottom: 0;
  background-color: #000;
}

<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">
  <footer></footer>
</div>

What I've tried:

• I've tried to set position: absolute (of footer) like in this answer: css - footer doesn't go at bottom
• I also tried to put a wrapper around the footer with height: 100%;
• I've also used min-height: 100vh instead of height with no effect

The question:

How can I get the footer to the bottom of the page?

PS: I don't know if it's relevant but I'm using Firefox v. 85.0.2 (64-bit)

Edit:

I want the footer to be inside the page, I use these pages to structure my website and the footer should appear on the bottom of the very last page.

Answer 1

The following code will solve your problem:

.page {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: cyan;
}

.spacer {
    flex: 1;
}

footer {
  width: 100%;
  height: 100px;
  background-color: #000;
}

<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3
<div class="spacer"></div>
<footer></footer>
</div>