如何保持页脚始终在底部，同时保持干净的html结构？

Question

我如何保持html标记不变，但footer始终位于main下方的底部？

此处页脚与第二个.page div元素重叠。如何将footer放在其下？

body, html{
  margin:0;
  height:100%;
}
header{
  top:0;
  left:0;
  width:100%;
  position:fixed;
  background-color: red;
  height:50px;
}
main{
  width:100%;
  padding-top:50px;
  height:calc(100% - 50px);
}
.page{
  background-color:green;
  height:100%;
  width:100%;
}
.page:first-child{
  background-color:yellow;
}
footer{
  background-color:blue;
}
p{
  margin:0 0 10px 0;
}

<header>
  header
</header>
<main>
  <div class="page">page1</div>
  <div class="page">page2</div>
</main>
<footer>
  footer
  <p> Text</p>
    <p> Text</p>
    <p> Text</p>
    <p> Text</p>
</footer>

Answer 1

body, html{
  margin:0;
  padding:0;
  height:100%;
}
header{
  top:0;
  left:0;
  width:100%;
  background-color: red;
  height:50px;
}
main{
  width:100%;
}
.page{
  background-color:green;
  min-height:50vh;
  height:100%;
  width:100%;
}
.page:first-child{
  background-color:yellow;
}
footer{
  background-color:blue;
}

<header>
  header
</header>
<main>
  <div class="page">page1</div>
  <div class="page">page2</div>
</main>
<footer>
  footer
  <p> Text</p>
    <p> Text</p>
    <p> Text</p>
    <p> Text</p>
</footer>

Answer 2

body, html{
  margin:0;
  height:100%;
}
header{
  top:0;
  left:0;
  width:100%;
  position:fixed;
  background-color: red;
  height:50px;
}
main{
  width:100%;
  padding-top:50px;
  height:calc(100% - 50px);
}
.page{
  background-color:green;
  height:100%;
  width:100%;
}
.page:first-child{
  background-color:yellow;
}
footer{
  background-color:blue;
  position: absolute; 
  left: 0 ; 
  right: 0; 
  bottom: calc(-100% - 50px);
}
p{
  margin:0 0 10px 0;
}

<header>
  header
</header>
<main>
  <div class="page">page1</div>
  <div class="page">page2</div>
</main>
<footer>
  footer
  <p> Text</p>
    <p> Text</p>
    <p> Text</p>
    <p> Text</p>
</footer>