Невозможно сделать столбцы фундамента zurb в нижней части страницы

Question

Я пытаюсь создать трехугольную раскладку, которая простирается до нижней части экрана, которая использует сетку 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; 
} 

Answer 1

Вот скрипка для моего подхода: JSFiddle

Для нижнего колонтитула, однако, я просто использовал положение: вместо этого исправлено. Главное, что вам также необходимо указать высоту на родительских элементов тоже в content-wrapper, в row и т.д.

Единственное предостережение тем, как я это сделал, хотя, является то, что row-footer ДИВ позиция фиксируется и имеет z-index 1. Таким образом, он существенно зависает над тремя столбцами. Таким образом, это означает, что если есть какой-либо контент, содержащийся в этих столбцах, который приближается к самому низу, есть потенциал, который может быть покрыт.