Tidak dapat membuat kolom pondasi zurb meregang ke bagian bawah halaman

Saya mencoba membuat tata letak tiga kolom yang membentang ke bagian bawah layar yang menggunakan grid Zurb Foundation.

Struktur dasarnya melibatkan tiga kolom, masing-masing dengan judul di tengah dan gambar latar belakang yang berbeda, serta footer.

Inilah yang ingin saya capai (di mana tiga warna akan menjadi gambar latar belakang):

Masalahnya adalah karena konten tidak cukup untuk memenuhi layar, kolom saya tidak meregang ke bawah. Saya sudah bisa memperbaiki footer di bagian bawah halaman menggunakan teknik ini https://css-tricks.com/snippets/css/sticky-footer/. Namun hasilnya terlihat seperti ini:

Ini html saya:

<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>

dan inilah css saya:

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;
}