无法使 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

这是我的方法 fiddle： JSFiddle

不过对于页脚，我只是使用了 position: fixed 来代替。关键是您还需要在父元素上指定高度，content-wrapper、row 等

虽然我这样做的唯一警告是 row-footer div 位置固定并且 z-index 为 1。所以它基本上悬停在 3 列上.因此，这意味着如果这些列中确实包含靠近最底部的任何内容，则有可能覆盖它。

无法使 zurb 基础列拉伸到页面底部

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

html

css

zurb-foundation

sticky-footer