Can't make zurb foundation columns stretch to bottom of page - html

Question

I'm trying to make a three column layout that stretches to the bottom of the screen which uses the Zurb Foundation grid.
The basic structure involves three columns, each with a title in the center and a distinctive background image, and a footer.
This is what I'm trying to achieve (where the three colours would be background images):
The issue is that since there isn't enough content to fill the screen my columns don't stretch to the bottom. I've been able to fix the footer to the bottom of the page using this technique https://css-tricks.com/snippets/css/sticky-footer/.
But the result looks like this:
Here is my html:
<div id="content-wrapper">
<div class="row collapse">
<div class="small-centered large-uncentered large-4 columns episode">
<div class="episode-titles">
<h1>Column01</h1>
</div><!-- ends episode titles-->
</div><!-- ends episode-->
<div class="small-centered large-uncentered large-4 columns episode" >
<div class="episode-titles">
<h1>Column02</h1>
</div><!-- ends episode titles-->
</div><!-- ends columns-->
<div class="small-centered large-uncentered large-4 columns episode" style="background-image:url('{{ featured_image }}');">
<div class="episode-titles">
<h1>Column03</h1>
</div><!-- ends episode titles-->
</div><!-- ends columns-->
</div><!-- ends row collapse-->
</div>
and here is my css:
body, html {
height: 100%;
}
#content-wrapper {
min-height: 100%;
margin-bottom: -90px;
}
#footer, #content-wrapper:after {
height: 90px;
}
#content-wrapper:after {
content: "";
display: block;
}
#footer {
background-color: #161616;
border: none;
}
.episode {
max-width: 100%;
background-size: cover;
background-position: center center;
text-align: center;
height: 100%;
}
.episode-titles {
text-align: center;
display: inline-block;
vertical-align: middle;
}

Answer 1

Here is a fiddle for my approach:
JSFiddle
For the footer though, I just used position: fixed instead. The key thing is that you also need to specify height on the parent elements too, the content-wrapper, the row, etc.
The only caveat with the way I did it though, is that the row-footer div is position fixed and has a z-index of 1. So it is essentially hovering over the 3 columns. So that means if there does happen to be any content contained within these columns that nears the very bottom, there is a potential it can be covered.