title: CSS viewport height:100vh doesn't work correctly with content in the div
body: <p>I'm new here and registered because I couldn't find my answer in the existing treads. </p>
  
  <p>I'm trying to make a one-page website, and I want the 'landing page' to have a full background. I had the background on the whole page, but when I started placing text in the div, it broke. I used the following css (sass):</p>
  
  <pre><code>.intro {
      color: #fff;
      height: 100vh;
      background: url('http://www.flabber.nl/sites/default/files/archive/files/i-should-buy-a-boat.jpg') no-repeat center center; 
      background-size: cover;
  
      &amp;--buttons {
          position: absolute;
          bottom: 2em;
      }
  }
  
  p.hello {
      margin: 30px;
  }
  
  .page1 {
      color: #fff;
      height: 100vh;
      background: beige;
  }
  
  .page2 {
      color: #fff;
      height: 100vh;
      background: black;
  }
  </code></pre>
  
  <p>With the following HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /&gt;
          &lt;title&gt;My title&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
  
                  &lt;div id="intro" class="intro"&gt;
  
                      &lt;div class="text-center"&gt;
                          &lt;p class="hello"&gt;
                              Intro text is coming soon!
                          &lt;/p&gt;
                              &lt;div class="col small-col-12 intro--buttons"&gt;
                                  &lt;p&gt;Buttons coming here.
                                  &lt;/p&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div id="page1" class="col col-12 page1"&gt;
                      &lt;p&gt;Tekst test&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div id="page2" class="col col-12 page2"&gt;
                      &lt;p&gt;Tekst test.&lt;/p&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>You can see the result here: <a href="http://codepen.io/Luchadora/full/waYzMZ" rel="noreferrer">http://codepen.io/Luchadora/full/waYzMZ</a>
  Or see my pen: <a href="http://codepen.io/Luchadora/pen/waYzMZ" rel="noreferrer">http://codepen.io/Luchadora/pen/waYzMZ</a></p>
  
  <p>As you see, when positioning the intro text (<code>p.hello {margin: 30px;}</code>, the background size changed and is not full screen anymore. (Btw: I used an example background). Also the other pages have white spaces now..</p>
  
  <p>How can I fix this? I've read articles about viewports, but I think the only thing I need for this is <em><code>height: 100vh;</code></em>, right? Thanks in advance!</p>