title: How do I make a particular section of a webpage take up exactly the area of the user's viewing window?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body{
    height:100%;
  }
  .fillheight{
    display:flex;
    flex-direction:column;
    min-height:100%;
  }
  
  .fillheight-2{
      flex:1;
  }
  
  /*NAVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
  VVVVVVVVVVVVV
  NAV
  NAV
  NAV*/
  .fixated{
    position:fixed;
  }
    * {
    box-sizing: inherit;
    transition-property: all;
    transition-duration: .6s;
    transition-timing-function: ease;
  }
  
  .list-style{
    list-style-type: none;
  }
  
  .a{
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    color: #938653;
    
    @media (min-width: 100px) {
      font-size: 1em;
    }
    @media (min-width: 600px) {
      font-size: 1.6em;
    }
     @media (min-width: 1000px) {
      font-size: 2.1em;
    }
    
    
   }
  
  .flex{
    background-color: #212121;
    display: flex;
    padding: 10px;
    justify-content: space-around;
   width: 100%;
    margin: auto 0;
  }
  /*HOVERRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR
  RRRRRRRRRRRRRRRRRRRRRR
  
  RRRRRRRRRRRR
  RRRRRRRR*/
  a {
    text-decoration: none;
    }
  
  a:hover,
  a:active,
  a:link {
     color : #938653;
     text-decoration: none;
  }
  
  .btn-2 {
      letter-spacing: 0px;
  }
  
  .btn-2:hover,
  .btn-2:active {
    letter-spacing: 10px;
  }
  
  .btn-2:after,
  .btn-2:before {
    
    border: 1px solid rgba(#938653, 0);
    bottom: 2px;
    top: 2px;
    content: " ";
    display: block;
    position: relative;
    transition: all 280ms ease-in-out;
    width: 0;
  }
  
  .btn-2:hover:after,
  .btn-2:hover:before {
    backface-visibility: hidden;
    border-color: #938653;
    transition: width 350ms ease-in-out;
    width: 100%;
  }
  
  .btn-2:hover:before {
    bottom: auto;
    top: 0;
    width: 100%;
  }
  /*WELCOMEEEEEEEEEEEEEEEEEEEEEEE
  WELCOMEEEEEEEEEEEEEEEEEEEE
  WELCOMEEEEEEEEEEEEEE
  EEEEEEEEEEEEEE
  EEEEEEEEEEEEEE*/
   * {
    box-sizing: inherit;
    transition-property: all;
    transition-duration: .6s;
    transition-timing-function: ease;
  }
  
  html,body{
    height: 100%;
    background: #4A6556;
  }
  
  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #4A6556;
    
    padding-top:60px;
    height: 100vh;
  }
  
  .Hey{
    font-family: 'Kumar One', cursive;
    color: #938653;
    font-size: 38px;
    
    @media (min-width:500px){
      font-size: 70px;
    }
  
    @media (min-width:800px) {
      font-size:100px;
    }
    
    @media (min-width:1100px) {
      font-size:165px;
    }
  }
  
  .Hello{
    font-family: 'Lato', sans-serif;
    color:#212121;
    font-size: 16px;
    
     @media (min-width:500px){
      font-size: 24px;
    }
    
     @media (min-width:800px) {
      font-size:40px;
    }
    
    @media (min-width:1100px) {
      font-size:58px;
    }
  }
  /*ABOUT
  ABOUTTTTTTTTTTTTTT
  ABOUTTTTTTTTTTTT
  ABOUTTTTTTTTTT*/
  
  .parent{
    display: flex;
    flex-flow: row wrap;
    background:#212121;
    padding-bottom:50px;
  }
  
  .general{
    background:#212121;
    border-radius: 7px;
    margin: 5px;
    padding: 20px;
  }
  
  .Header{
    order: 1;
    height: 100px;
    flex: 0 1 100%;
    
    color: #4A6556;
    font-family: 'Kumar One', cursive;
    font-size: 80px;
    padding-left: 50px;
    padding-top:60px;
  }
  
  .Main{
    order: 2;
    min-height: 250px;
    flex: 2.5 1;
    @media(max-width: 800px){
     flex:1 1 100%;
     
    }
    
     color: #938653;
    font-family: 'Lato', sans-serif;
    font-size: 22px;
    padding: 20px 50px;
    }
  
  .Pic{
    order: 4;
    flex: 1 1;
    flex-grow: 1;
    
    padding-right: 55px;
  }
  
  .pic{
    text-align: center;
  }
  
  
  /*PROJECTTTTTTTTTTTTTTT
  PROJECTTTTTTTTTTTTTT
  PROJECTTTTTTTTTTTTTTTT
  PROJECTTTTTTTTTTTTTT
  */
  
  .Section{
    @media (max-width:600px){
      zoom:90%;
    }
    
     @media (max-width:512px){
      zoom:85%;
    }
    
     @media (max-width:489px){
      zoom:80%;
    }
    @media (max-width:462px){
      zoom:70%;
    }
    @media (max-width:420px){
      zoom:60%;
    }
    
  }
  
  .Flexy{
  
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   align-content: center;
    background: #4A6556;
    padding-bottom:50px;
    padding-top:30px;
  }
    
  .coloring {
    
    border-radius:7px;
    padding: 5px;
   
    margin: 5px
  }
  
  .Projects{
    order: 1;
    flex: 0 1 100%;
    font-family: 'Kumar One', cursive;
    color: #938653;
    font-size: 80px;
    padding-left: 50px;
  }
  
  .Tribute{
    order: 2;
    flex: 1 1;
    text-align: center;
    
    font-family: 'Kumar One', cursive;
    color:#212121;
    font-size: 50px;
    
  }
  
  .Portfolio{
    order: 3;
    flex: 1 1;
    text-align:center;
    @media (max-width:1120px){
      flex:100%;
    }
    
     font-family: 'Kumar One', cursive;
    color:#212121;
    font-size: 50px;
  }
  
  .fade{
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
  }
  
  .fade:hover {
    opacity: 0.4;
  }
  
  .word-1{
    position: relative;
    left: -62px;
    top:26px;  
  }
  
  .word-2{
    position: relative;
    left:10px;
    top:23px;
  }
  
  /*CONTACTTTTTTTTTTTTTTTTTTTTT
  CONTACTTTTTTTTTTTTTTTTTTTT
  CONTACTTTTTTTTTTTTTT
  TTTTTTTTTTTTTT
  TTTTTTTTTTTTTTTTT
  TTTTTT*/
  
  .marking{
    
    border-radius: 7px;
    margin: 5px;
    padding:0px;
  }
  
  .contener{
    display:flex;
    align-items: center;
    flex-flow: column;
  
  
    background:#212121;
    padding-top:40px;
    padding-bottom:40px;
  }
  
  .Contact{
    order:1;
    width: 100%;
    padding-left: 1.0em;
    margin-bottom:50px;
    font-family: 'Kumar One', cursive;
    color:#938653;
    font-size:75px;
    
  }
  
  .Email{
    text-align: center;
    order:2;
    font-family: 'Raleway', sans-serif;
    color:#4A6556;
    font-size: 50px;
    
  }
  
  .Linkedin{
    text-align: center;
    order: 3;
    font-family: 'Raleway', sans-serif;
    color:#4A6556;
    font-size:50px;
   
  }
  
  .email{
    background:#4A6556;
    color:#938653;
    padding-left:9px;
    padding-right:9px;
    border-radius:6px;
  }
  
  //colors
  $red: #212121;
  $white: red;
  
  //base styles
  
  * {
    box-sizing: inherit;
    transition-property: all;
    transition-duration: .6s;
    transition-timing-function: ease;
  }
  
  
  .btn-3 {
    background: lighten($red, 3%);  
    border: 0px solid darken($red, 1);
    box-shadow: 9px 9px 0 darken($red, 5%), 2px 4px 6px darken($red, 2%);
   
    letter-spacing: 1px;
    transition: all 150ms linear;
    padding:0px;
  }
  
  .btn-3:hover {
    background: darken($red, 1.5%);
    border: 0px solid rgba(#000, .05);
    box-shadow: 0px 0px 0px rgba(#fff, 1);
    color: lighten($red, 18%); 
    text-decoration: none;
    text-shadow: 0px 0px 0 darken($red, 9.5%);
    transition: all 250ms linear;
    opacity:0.8;
  }
  
  .zoomout{
    @media(max-width:760px){
      zoom:80%;
    }
    @media(max-width:580px){
    zoom:70%;
    }
    @media(max-width:580px){
    zoom:60%;
    }
    @media(max-width:430px){
    zoom:50%;
    }
    @media(max-width:430px){
    zoom:50%;
    }
    @media(max-width:430px){
    zoom:40%;
    }  
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Kumar+One" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Kumar+One|Lato" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Kumar+One" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Kumar+One|Lato" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet"&gt;
  
  &lt;body class="fillheight"&gt;
    
    &lt;div class="fillheight-2"&gt;
      &lt;ul class="flex fixated list-style"&gt;
        
    &lt;li&gt;&lt;a href="#" class="btn-2 a"&gt;About &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" class="btn-2 a"&gt;Projects&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" class="btn-2 a"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;/div&gt;
    &lt;div class="fillheight-2"&gt;  
      
      &lt;div class="box"&gt;
    
      &lt;hey class="Hey"&gt;Welcome!&lt;/hey&gt;  
      &lt;hello class="Hello"&gt;This is David's portfolio page.&lt;/hello&gt;
      
     &lt;/div&gt;
     &lt;/div&gt;
    
    &lt;div class="fillheight-2"&gt;  
      
      &lt;div class="parent"&gt;
      &lt;header class="Header general"&gt;About&lt;/header&gt;
      &lt;main class="Main general"&gt;I started learning web development the December of 2016 by completing my first ever coding challenge on Free Code Camp. It was that December because that was when the winter recess of my college began, which meant I had abundance of time to assign to whatever activity I would take up.&lt;br&gt;&lt;br&gt;The reason I am interested in web development is that I want to make beautiful and easy-to-use websites for people. I chose websites over apps or softwares that you have to download to use, because they are so accessible and widespread.&lt;/main&gt;
      &lt;pic class="pic Pic general"&gt;&lt;img src=""http://imgur.com/kJNhW7r"&gt;&lt;img src="http://i.imgur.com/kJNhW7r.jpg" title="source: imgur.com"" class="img-circle" alt="My head shot" width="250" height="250"&gt;&lt;/pic&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="fillheight-2"&gt;
      &lt;section class="Flexy Section"&gt;
  
      &lt;div class="coloring Projects "&gt;Projects&lt;/div&gt;
     &lt;div class="coloring Tribute"&gt;
       &lt;div class="word-1"&gt;Tribute Page&lt;/div&gt;
        &lt;a href="https://codepen.io/Hello911/pen/EZYWed"&gt;&lt;img src="http://i.imgur.com/ifkpFbR.png" title="source: imgur.com" class="img-rounded fade" alt="Tribute Page" width="500" height="300"&gt;&lt;/a&gt;
    &lt;/div&gt;
     &lt;div class="coloring Portfolio"&gt;
    &lt;div class="word-2"&gt;My Portfolio Page&lt;/div&gt;
       &lt;a href="#"&gt;&lt;img src="http://i.imgur.com/EnR9gj1.png" title="source: imgur.com" title="source: imgur.com" title="source: imgur.com" class="img-rounded fade" alt="Coming Soon!" width="500" height="300"&gt;&lt;/a&gt;
    &lt;/div&gt;
      
  &lt;/section&gt;
    &lt;/div&gt;
    
    &lt;div class="fillheight-2"&gt; &lt;section class="contener"&gt;
    &lt;div class="marking Contact"&gt;Contact&lt;/div&gt;
     &lt;div class="marking Email"&gt;Email me &lt;b class="email zoomout"&gt;experimentative@gmail.com&lt;/b&gt;&lt;/div&gt;
     &lt;div class="marking Linkedin"&gt;Or connect with me on &lt;a href="https://www.linkedin.com/in/david-c-b8b880101
  " class="btn-3 btn" target="_blank"&gt;&lt;img src="http://i.imgur.com/7lTSk6J.png" title="source: imgur.com" alt="Linkedin Button" class="img-rounded" height=50px width=50px&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/section&gt;
    
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/Hello911/pen/ygOQwp?editors=1100" rel="nofollow noreferrer">My project.</a></p>
  
  <p>I want the first section, the part that says "Welcome!". I want that green rectangular section to take up exactly the space of the window that people are viewing my webpage in. (Of course, excluding the area already taken up by the navigation bar).</p>
  
  <p>I don't know if that makes any sense. But basically, after the web page finish loading itself, the first thing, and the <strong>only</strong> thing that the viewer should see is the navigation bar and the Welcome section. Then the viewer may go to others parts/sections of the page by clicking the buttons in the navigation bar or scrolling down.
  <a href="https://i.stack.imgur.com/aVHjt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aVHjt.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Go to link. Too many lines of code.</code></pre>
  </div>
  </div>
  </p>