Make a div at least as tall as the page - css

Question

Here is a restricted code pen containing the problem code: http://codepen.io/Jraghon/pen/YqgKYR
I'm trying to make a fixed, mobile-first, resonsive header. I have everything working, except for some sizing issues. Specifically, I want the div that actually holds the content to be at least as high as the viewport minus the size of the header.
I have ensured that all of the div's ancestors have height: 100%. Moreover, js shows that they are all the correct height. However, the dc-container is not as tall as it should be, and I can't figure out why.
Answer
For lack of a better answer, I am using the answer from this question (although I wish there were a way to make it stretch without tables):
Make nested div stretch to 100% of remaining container div height
Here is the final pen: http://codepen.io/Jraghon/pen/pyYojr

Answer 1

The problem is that you have a circular definition:
.site-content {
min-height: calc(100% - 66px);
height: auto; /* Depends on contents */
}
.site-content > .dc-container {
height: 100%; /* Depends on parent */
min-height: 100%; /* Depends on parent */
}
Instead, you should use
.site-content {
height: calc(100% - 66px);
}
.site-content > .dc-container {
height: auto;
min-height: 100%;
}
$(document).ready(function() {
$('#header__icon').click(function(e) {
e.preventDefault();
$('body').toggleClass('with--sidebar');
gooo();
});
$('#site-cache').click(function(e) {
$('body').removeClass('with--sidebar');
gooo();
});
});
function gooo() {
$('.x0').html('html x: ' + $('html').outerWidth());
$('.x1').html('html y: ' + $('html').outerHeight());
$('.x2').html('body x: ' + $('body').outerWidth());
$('.x3').html('body y: ' + $('body').outerHeight());
$('.x4').html('site-container x: ' + $('.site-container').outerWidth());
$('.x5').html('site-container y: ' + $('.site-container').outerHeight());
$('.x6').html('site-pusher x: ' + $('.site-pusher').outerWidth());
$('.x7').html('site-pusher y: ' + $('.site-pusher').outerHeight());
$('.x8').html('header dc-container x: ' + $('.header .dc-container').outerWidth());
$('.x9').html('header dc-container y: ' + $('.header .dc-container').outerHeight());
$('.x10').html('site-content x: ' + $('.site-content').outerWidth());
$('.x11').html('site-content y: ' + $('.site-content').outerHeight());
$('.x12').html('content dc-container x: ' + $('.site-content .dc-container').outerWidth());
$('.x13').html('content dc-container y: ' + $('.site-content .dc-container').outerHeight());
}
$(function() {
$(window).resize(gooo).trigger('resize');
});
/* VARIABLES */
html,
body {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.site-container {
height: 100%;
}
.site-pusher {
height: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.dc-container {
overflow: hidden;
*zoom: 1;
margin: auto;
width: 100%;
max-width: 960px;
height: 100%;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 66px;
line-height: 66px;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.header .dc-container {
color: #fff;
background-color: #0288D1;
}
.site-content {
margin-top: 66px;
height: calc(100% - 66px);
}
.site-content .dc-container {
height: auto;
min-height: 100%;
background-color: #B3E5FC;
}
.header__logo {
color: #fff;
font-weight: 700;
padding: 0 25px;
float: left;
}
.menu {
position: fixed;
left: -250px;
top: 0;
bottom: 0;
width: 250px;
background-color: #0277BD;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.menu a {
padding: 0 10px;
color: #fff;
height: 40px;
text-align: center;
line-height: 40px;
display: block;
border-bottom: 1px solid #0288D1;
}
.menu a:hover {
color: #B3E5FC;
}
.header__icon {
position: relative;
display: block;
float: left;
width: 50px;
height: 66px;
cursor: pointer;
}
.header__icon:after {
content: '';
position: absolute;
display: block;
width: 1rem;
height: 0;
top: 26px;
left: 15px;
-moz-box-shadow: 0 0px 0 1px #fff, 0 6px 0 1px #fff, 0 12px 0 1px #fff;
-webkit-box-shadow: 0 0px 0 1px #fff, 0 6px 0 1px #fff, 0 12px 0 1px #fff;
box-shadow: 0 0px 0 1px #fff, 0 6px 0 1px #fff, 0 12px 0 1px #fff;
}
.site-cache {
position: fixed;
top: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.with--sidebar {
overflow: hidden;
}
.with--sidebar .header,
.with--sidebar .site-pusher {
left: 250px;
right: -250px;
}
.with--sidebar .menu {
left: 0;
}
.with--sidebar .site-cache {
right: 0;
left: 250px;
}
<div class="site-container">
<div class="site-pusher">
<header class="header">
<div class="dc-container">
<a href='#' class="header__logo" id='header__logo'><b>LOGO</b></a>
<nav class="menu">
Home
About
Blog
Contact
</nav>
</div>
</header>
<div class="site-content">
<div class="dc-container">
<div class="x0"></div>
<div class="x1"></div>
<br>
<div class="x2"></div>
<div class="x3"></div>
<br>
<div class="x4"></div>
<div class="x5"></div>
<br>
<div class="x6"></div>
<div class="x7"></div>
<br>
<div class="x8"></div>
<div class="x9"></div>
<br>
<div class="x10"></div>
<div class="x11"></div>
<br>
<div class="x12"></div>
<div class="x13"></div>
</div>
<!-- END container -->
</div>
<!-- END site-content -->
<div class="site-cache" id="site-cache"></div>
</div>
<!-- END site-pusher -->
</div>
<!-- END site-container -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

Answer 2

You can use viewport sizes. vw means viewport width, and vh viewport height:
.selector {
height: 100vh; /** 100% of viewport height **/
}
You can use calc() to substract the height of the header:
.header {
height: 50px;
}
.selector {
height: calc(100vh - 50px); /** 100% of viewport height - 50 px header height **/
}