ไม่สามารถทำให้คอลัมน์ฐานรากยืดไปที่ด้านล่างของหน้าได้

ฉันกำลังพยายามสร้างเค้าโครงสามคอลัมน์ที่ทอดยาวไปที่ด้านล่างของหน้าจอซึ่งใช้ตาราง Zurb Foundation

โครงสร้างพื้นฐานประกอบด้วยสามคอลัมน์ โดยแต่ละคอลัมน์มีชื่ออยู่ตรงกลางและมีภาพพื้นหลังที่โดดเด่น และมีส่วนท้าย

นี่คือสิ่งที่ฉันพยายามทำให้สำเร็จ (โดยที่ทั้งสามสีจะเป็นภาพพื้นหลัง):

ปัญหาคือเนื่องจากมีเนื้อหาไม่เพียงพอที่จะเติมเต็มหน้าจอ คอลัมน์ของฉันจึงไม่ขยายไปถึงด้านล่างสุด ฉันสามารถแก้ไขส่วนท้ายที่ด้านล่างของหน้าได้โดยใช้เทคนิคนี้ https://css-tricks.com/snippets/css/sticky-footer/ แต่ผลลัพธ์จะเป็นดังนี้:

นี่คือ 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>

และนี่คือ 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;
}