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インデックスを削除し、通常の要素の順序を使用してください。一番上の記事では、上マージンを負に設定してオーバーラップさせることができます。

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