How To Make A Div Fit To The Size Of The Window?

Essentially, i'm trying to emulate the first page of this theme: http://blackrockdigital.github.io/startbootstrap-grayscale/ I want to make it so that the first section occupies th

Solution 1:

To make a div fit the entire screen, try this:

body {
    margin: 0;
}

.my_fullscreen_div {
    width: 100vw;
    height: 100vh;
}

Solution 2:

Method 1:

Try adding a background-color in the body.

body {
background-color:black;
}

Method 2:

HTML: place the section2 div inside the section1 div

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="section1 text-center">
        <h1 class="title" id="name">Patrick Watrous</h1>
        <h2 class="title" id="info">Learn. Implement. Innovate.</h2>
        <i class="fa fa-chevron-circle-down fa-5x"></i>
        <p class="title" id="bio">The ability to dream up an idea and then recreate it on a computer has always been something that has caused me immense satisfaction. Due to this, I'm pursuing a bachelor's degree at Northeastern University in computer science and business. I'm interested in all facets of design, from Bootstrap to Java. Take a look at my website and see what i've been up to!</p>
  <div class="section2 text-center">
    <p>Lorem ipsum dolor sit amet,.....
  </div>
      </div>
    </div>
  </div>
</div>