Background color only displays above the fold - html

Question

Try to access acetheinterview.co on your mobile phone and go to page 2. You will see that the part of the screen you see when you land on the page has a background color but when you start to scroll it becomes white and you cannot see the last part of my content.
Any ideas how to fix?
.page {
display:none;
padding-left: 20px;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 0px;
}
* {
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
margin: 0;
font-family: "Helvetica Neue" !important;
}
html {
margin: 0;
}
.jumbotron {
height:100%;
background: url('hero-bg-v1.jpg');
text-align: center;
margin: 0 !important;
}
h1 {
color: #FFFFFF !important;
font-size: 45px !important;
padding-top: 10%;
font-weight: 500;
line-height: 50px;
letter-spacing: 0.8px;
}
h2 {
color: #FFFFFF !important;
font-size: 20px !important;
font-weight: 400;
letter-spacing: 0.8px;
padding-bottom: 20px;
}
#page1 {
width: 100%;
height: 100%;
background-color: #7DBB91;
}
#page2 {
width: 100%;
height: 100%;
background-color: #8BCBCA;
}
#page3 {
width: 100%;
height: 100%;
background-color: #C384C5;
}
#page4 {
width: 100%;
height: 100%;
background-color: #7C8DF5;
}
#page5 {
width: 100%;
height: 100%;
background-color: #E96C6C;
text-align: center;
}
<div class="container">
<div class="row">
<h1 class="advice">ADVICE #1</h1>
</div>
<div class="row">
<div class="col-sm-5">
<p class="quote">Always, always research the company you are interviewing with. What is their core product?
What other opportunities are they pursuing? What are the challenges they are facing?
</p>
<br>
<br>
<button type="button" class="btn-md sales-cta" id="previousbuttonpage1">Previous</button>
<button type="button" class="btn-md sales-cta" id="nextbuttonpage1">Next</button>
</div>
<div class="col-sm-7 text-center hidden-xs">
<%= image_tag("quote.png", width: "250", height: "170") %>
<h2 class="author">Girl</h2>
<h3 class="job-title">Product Manager</h3>
<h4 class="company">Google</h4>
</div>
</div>
</div>
<div class="col-xs-12 hidden-xs">
<div class="author-picture" id="joe">
<%= image_tag("joe-zadeh.png") %>
</div>
</div>
</div>

Answer 1

As I guess this is the problem:
body { height: 100vh;}
100vh limits the heigh to the viewport height. Change this to height:100% or min-height:100vh; as Paulie_D suggested