How do I make a section take up an entire screen regardless?

Question

body{
  display:grid;
  background:#caa178;
  margin:0;
}
.navbar{
  display:flex;
  justify-content:flex-end;
  overflow:hidden;
  background-color:#605f5f;
  position:fixed;
  top:0;
  width:100%;
  z-index:999;
}
.navbar a{
  display:block;
  color:#cdcdcc;
  text-decoration:none;
  padding:30px;
  float:right;
  font-family:monospace;
  font-size:130%;
}
.navbar a:hover{
  background:#3a3b3b;
  font-weight:1000;
}

.about-me{
  margin-top:200px;
  display:grid;
  grid-template:'hi hi hi hi txt txt'
                'hi hi hi hi vid vid'
                'hi hi hi hi vid vid';
  height:100%;
}
.about-me1{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:300%;
  grid-area: 2/1/5/5;
}
.about-me2{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:'MV Boli';
  color:#605f5f;
  grid-area: 2/5/4/7;
  margin-top:-30px;
}
.negative{
  display:grid;
  grid-template:'vid vid'
                'vid vid';
  margin-top:-100px;
}
.padding{
  padding:10px;
  border:0;
}

.my-work{
  display:grid;
  margin-top:100px;
  grid-template:'title title title'
                'work work work'
                'work work work';
  justify-content:center;
  background:#605f5f;
}
.my-work-text{
  grid-area: 1/1/2/4;
}
.work1{
}
.work2{
  width:400px;
  border-style:solid;
  border-radius:10px;
  border-color:#caa178;
  margin: 0px 5px 10px 5px;
}

<!DOCTYPE>
<html>
  <div class="navbar">
    <a href="#a">ABOUT ME</a>
    <a href="#my-work">MY WORK</a>
    <a href="#a">CONTACT ME</a>
  </div>
  
  <div id="about-me"class="about-me">
    <div class="about-me1">
    <h1 style="font-family:Impact; color:#282828">Hi I'm Finn</h1>
    <p style="color:#605f5f; font-family:Lucida Handwriting">a beginner web developer...</h1>
  </div>
  <div class="about-me2">
    <h1 id="jammers-text"><center>MY FAVORITE JAMMERS BELOW<h1><br>
      <div class="negative">
    <iframe id="vid1" class="padding" src="https://www.youtube.com/embed/YdYwICNPDwI"></iframe>
    <iframe id="vid2" class="padding" src="https://www.youtube.com/embed/TgOu00Mf3kI"></iframe>
    <iframe id="vid3" class="padding" src="https://www.youtube.com/embed/jwCniuHdmj8"></iframe>
    <iframe id="vid4" class="padding" src="https://www.youtube.com/embed/kn6-c223DUU"></iframe>
      </div>
  </div>
  </div>
      
      
      <div id="my-work"class="my-work">
        <h1 class="my-work-text"style="font-size:500%; font-family:impact; color:#cdcdcc"><center>My Work</center></h1>
        <a href="">
          <div class="work1">
            <img class="work2" src="https://www.iphone2lovely.com/wp-content/uploads/2016/05/blank-wallpaper-for-printing.png">
          </div>
        </a>
        <a href="">
          <div class="work1">
            <img class="work2" src="https://www.iphone2lovely.com/wp-content/uploads/2016/05/blank-wallpaper-for-printing.png">
          </div>
        </a>
        <a href="">
          <div class="work1">
            <img class="work2" src="https://www.iphone2lovely.com/wp-content/uploads/2016/05/blank-wallpaper-for-printing.png">
          </div>
        </a>
        <a href="">
          <div class="work1">
            <img class="work2" src="https://www.iphone2lovely.com/wp-content/uploads/2016/05/blank-wallpaper-for-printing.png">
          </div>
        </a>
        <a href="">
          <div class="work1">
            <img class="work2" src="https://www.iphone2lovely.com/wp-content/uploads/2016/05/blank-wallpaper-for-printing.png">
          </div>
        </a>
        <a href="">
          <div class="work1">
            <img class="work2" src="https://www.iphone2lovely.com/wp-content/uploads/2016/05/blank-wallpaper-for-printing.png">
          </div>
        </a>
      </div>
</html>

Hey guys once again. Is there a way for me to make each of my sections "my work" and "about me" to take the full screen each regardless of anything? Something like the https://codepen.io/freeCodeCamp/full/zNBOYG about me's section. I would want to make both of the sections take one full screen each regardless of how much you zoom or minimize, and the only way you can see the other section is if you scroll, or press a link to it. How can I achieve this? Thanks.

Waooo i am really amazed! That answer below fixed your issue ? Really. — Always Helping, Aug 10 '20 at 02:55

score 2 · Accepted Answer · answered Aug 10 '20 at 02:48

vw and vh are the units you're looking for. If you want your section to cover the entire viewport, set its width to 100vw and height to 100vh. 1vh is equal to 1% of the entire height of the screen (viewport height) while 1vw is equal to 1% of the viewport width.

If you open DevTools and inspect the welcome section of your example, you'll see that its CSS properties are:

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh; /* <--- This is what you need */
  background-color: #000;
  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}

How do I make a section take up an entire screen regardless?

1 Answers1