I am facing issues with the header and cannot seem to find a solution. My goal is to make the header span 100% of the window screen height. I need a responsive header that adjusts to 100% height, and when resizing for a smaller viewport, nothing should show below the header. The header contains a nested div with a bootstrap carousel. Below are the links to my code snippets:
http://codepen.io/anon/pen/EgJmEj
https://jsfiddle.net/3oht91fg/
<body>
<header>
<div class="container">
<div class="logo">
<a href="index.html">
</a>
</div>
</div>
<nav>
<div class="container">
<ul class="nav-bar">
<li><a class="active-subpage" href="">Option test</a></li><!--
--><li><a href="">Option test</a></li><!--
--><li><a href="">Option test</a></li><!--
--><li><a href="">Option test</a></li><!--
--><li><a href="">Option test</a></li><!--
--><li><a href="">Option test</a></li></ul>
</div>
</nav>
<div class="slider">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="item" style="">
<img src="http://placehold.it/1920x1080">
<div class="carousel-caption">
<h4 class="">First Slide Title</h4>
<p class="">
Description for First Slide, this First Slide.
</p>
</div>
</div>
<div class="item active">
<img src="http://placehold.it/1920x1080">
<div class="carousel-caption">
<h4 class="">Second Slide Title</h4>
<p class="">
Description for Second Slide, this is Second Slide.
</p>
</div>
</div>
<div class="item" style="">
<img src="http://placehold.it/1920x1080">
<div class="carousel-caption">
<h4 class="">Third Slide Title</h4>
<p class="">
Description for Third Slide, this is Third Slide.
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a euismod libero. Phasellus elementum rutrum sapien et facilisis. Curabitur finibus eros laoreet ligula faucibus, quis interdum mauris efficitur. Aenean posuere iaculis sem, vitae pulvinar nibh aliquam dignissim. Nulla quis tristique dui. Duis luctus semper dignissim. Aenean tellus tellus, interdum at egestas nec, elementum ut tortor. Integer sodales nisi quam, ut rhoncus odio scelerisque ut. Morbi interdum leo a velit temp...
</p>
</main>
<footer>
<div class="container">
<div class="left-footer col-md-4">
<p>© TEST</p>
</div>
<div class="right-footer col-md-8">
<p>MADE BY ADER</p>
</div>
</div>
</footer>