How do I get my logo, slideshow and image to cover my entire screen no matter the window size

Question

I would like to get all three of these divs (logo, slideshow, and subslider) to fit the entire screen window no matter the size. I basically want to mimic the background:cover action in CSS but with all three of these elements. From my research I need to do something in javascript but I just can't seem to get it to work no matter what I try. I would also like to note that I am using drupal if that changes anything... Despite reading a lot on the subject, I'm way out of my comfort zone when it comes to trying to understand window resizing issues, any help, advice, and code snippets would be a godsend please!

<div class="logo">
<img src="sites/all/themes/cpd pro/images/cpd.jpg" alt="Center for Passion Development">
</div>
<!-- *************SLIDESHOW***************-- -->
<div id="slider">
<img src="sites/all/themes/cpd pro/images/slide1.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide2.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide3.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide4.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide5.jpg"/>
</div>  
<!-- *************BELOW SLIDESHOW IMAGE***************-- -->
<div class="subslider">
<h5><img src="sites/all/themes/cpd pro/images/nav-wrap.png" alt="navigation">  </h5>
</div>

Answer 1

Use vh unit in CSS . 100vh is exactly 100% of your viewport's height, so you can make your 3 divs heights sum to 100vh.