Image overlapping Div when VH is added - html

Question

I'm currently trying to set up div sections so they take up about 95vh of the web page.
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.
All of the divs have relative positioning and this only occurs when I add a vh to the div.
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;
}
<section id="showcase" class="">
<a id="scrolltoShowcase"></a>
<div class="chevronDown chevDkBlue hidden-lg hidden-md"></div>
<div id="contentShowcase" class="row col-DarkBlue bkgrd-LtAccentBlue">
</div>
</div>
</section>
<section id="judging">
<a id="scrolltoJudging"></a>
<a class="chevronDown chevtntBlue" href="#scrolltoJudging"></a>
<div id="judgingImg"></div>
</section>

Answer 1

You could use the z-index to set things right in a kind of a layering style.
section#showcase {
height: 92vh;
z-index: 100;
}
#contentShowcase {
height: 92vh;
z-index: 80;
}
In this case, section#showcase would be at the top of the #contentShowcase for it has the higher value of z-index.

Answer 2

In the sample code the problem was caused due to this css -
#contentShowcase{
height:92vh;
}
you will see that the div#contentShowcase is inside section on which you have set height: 92vh but when you set height: 92vh on the child div #contentShowcase, this div goes out of the boundaries of section and hence the part of this div is below the next section
see this fiddle with your original code, I have added a green border to illustrate how it goes out of section
now see this fiddle in which I have removed height
so stop setting height in vh in div present inside section in which too you have set height in vh, use % instead.