title: Image overlapping Div when VH is added
body: <p>I'm currently trying to set up div sections so they take up about 95vh of the web page.</p>
  
  <p>The issue is that when I add vh to one of the sections, the image on the next section overlaps the previous section blocking off some of the content. </p>
  
  <p>All of the divs have relative positioning and this only occurs when I add a vh to the div.</p>
  
  <p><a href="https://i.stack.imgur.com/snlh4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/snlh4.png" alt="enter image description here"></a></p>
  
  <pre><code>section#showcase{
      height:92vh;
  }
  #contentShowcase{
      height:92vh;
  }
  section#judging {
      margin-bottom: 50px;
      height: 90vh;
  
  }
  section#judging #contentEnter {
      margin-top: 50px;
      height:350px;
  }
  #judgingImg {
      background: url('../images/beyond-2015-city.jpg') no-repeat 0 0;
      background-size: cover;
      height:50vh;
  
  }
  /* Section Content */
  section#mainContent, 
  section#mainContentEnter, 
  section#mainContentAttend, 
  section#gobeyond, 
  section#event, 
  section#eventInfo, 
  section#enter, 
  section#attend, 
  section#judging, 
  section#sponsors, 
  section#venue, 
  section#showcase,
  section#form,
  #eventQuote, 
  #judgingImg, 
  #sponsorsImg, 
  .contentBlock {
      width: 100%;
      min-width: 100%;
      display: block;
      position: relative;
  }
  #scrolltoBeyond2015, #scrolltoEvent, #scrolltoShowcase, #scrolltoJudging, #scrolltoVenue {
      padding-top: 68px;
      margin-top: -68px;
      display:block;
  }
  
  
  
  
  
   &lt;section id="showcase" class=""&gt;
                  &lt;a id="scrolltoShowcase"&gt;&lt;/a&gt;    
                  &lt;div class="chevronDown chevDkBlue hidden-lg hidden-md"&gt;&lt;/div&gt;
  
                  &lt;div id="contentShowcase" class="row col-DarkBlue bkgrd-LtAccentBlue"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
    &lt;section id="judging"&gt;
              &lt;a id="scrolltoJudging"&gt;&lt;/a&gt;
              &lt;a class="chevronDown chevtntBlue" href="#scrolltoJudging"&gt;&lt;/a&gt;
              &lt;div id="judgingImg"&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>