基金会6中的粘性页脚

Question

我一直在使用基础框架获得粘性页脚以响应页面的一些问题。看起来页脚并不认识文章内容的高度。我试图搞定位，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-索引，并使用正常的元素顺序。对于顶级文章，您可以设置负顶边距以获得重叠：

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