HTML content filling page, but able to scroll past to other content - html

Question

I am trying to make it so that on the homepage of my site, when I load into the site, you can only see the nav, title, image and some text underneath, the red div elements should not be shown, and you would have to scroll down to see it. How do I do this while still making the page responsive?
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
h3 {
font-family: 'Raleway', sans-serif;
font-weight: 300;
}
p {
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
body {}
img {
height: 10%;
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
margin: 10px;
padding: 0px;
overflow: hidden;
}
li {
float: left;
padding: 1%;
font-family: 'Raleway', sans-serif;
}
li a {
text-decoration: none;
color: black;
}
li a.active {
text-decoration: underline;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: white;
}
/*text that needs to stay on home page under image*/
.text {
text-align: center;
}
/*what needs to be hidden*/
.container1 {
padding: 40px;
background-color: red;
text-align: center;
}
/*Area with title and image*/
.header {
padding: 30px;
font-size: 40px;
text-align: center;
grid-area: banner;
width: 100%;
color: black;
}
#media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
<link href="https://fonts.googleapis.com/css?family=Raleway:200,400" rel="stylesheet">
<div class="nav">
<ul>
<li>Learning Journal</li>
<li>Tutorial</li>
<li>Contact Me</li>
</ul>
</div>
<div class="header">
<h2> CI435 - INTRODUCTION TO WEB DEVELEPMONT</h2>
<img src="images/htmlcode.jpg" alt="">
</div>
<div class="text">
<h2>PLACEHOLDER</h2>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>

Answer 1

You're looking for height: 100vh (the viewport unit).
You'll also need to wrap your .header and .text placeholder into a parent element so you can control the height. I've wrapped it into the <main class="full-height" element and styled the class .full-height { height: 100vh; }
Now the user is forced to scroll to the red no matter how big/small there device is.
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
h3 {
font-family: 'Raleway', sans-serif;
font-weight: 300;
}
p {
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
body {}
img {
height: 10%;
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
margin: 10px;
padding: 0px;
overflow: hidden;
}
li {
float: left;
padding: 1%;
font-family: 'Raleway', sans-serif;
}
li a {
text-decoration: none;
color: black;
}
li a.active {
text-decoration: underline;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: white;
}
.text {
text-align: center;
}
.container1 {
padding: 40px;
background-color: brown;
text-align: center;
}
.header {
padding: 30px;
font-size: 40px;
text-align: center;
grid-area: banner;
width: 100%;
color: black;
}
.full-height { height: 100vh; }
#media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
<div class="nav">
<ul>
<li>Learning Journal</li>
<li>Tutorial</li>
<li>Contact Me</li>
</ul>
</div>
<main class="full-height">
<div class="header">
<h2> CI435 - INTRODUCTION TO WEB DEVELEPMONT</h2>
<img src="images/htmlcode.jpg" alt="">
</div>
<div class="text">
<h2>PLACEHOLDER</h2>
</div>
</main>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>