Foundation 6 中的粘性页脚

Question

我在使用 Foundation 框架为响应式页面设置粘性页脚时遇到了一些问题。页脚似乎无法识别文章内容的高度。我试过弄乱定位、javascript 解决方案和常见的 CSS 解决方案，但似乎没有任何效果。任何线索可能出了什么问题？我猜有一些非常明显的东西我正在查看，但找不到它！

代码如下：https://codepen.io/bublitzd/pen/grqPBp

header {
    width: 100%;
    height: 75vh;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    overflow: hidden;
    background-color: #D7DDE3;
    z-index: 0;
}

article {
    width: 100%;
    height: auto;
    position: relative;
    top: 65vh;
    z-index: 1;
    margin-bottom: 5vh;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: #000000;
    z-index: 3;
}

Answer 1

这是由于您所做的所有定位造成的。只需删除所有定位和 z-indexing 并使用正常的元素顺序。对于顶部文章，您可以设置负的上边距以获得重叠：

header {
  width: 100%;
  height: 75vh;
  overflow: hidden;
  background-color: #D7DDE3;
}

article {
  width: 100%;
  height: auto;
  margin-top: -10vh;
  margin-bottom: 5vh;
}

footer { 
  width: 100%;
  height: auto;
  background-color: #000000;
}

Foundation 6 中的粘性页脚

Sticky footer in Foundation 6

html

css

zurb-foundation

sticky-footer