Pied de page collant dans Foundation 6

Question

J'ai eu quelques problèmes pour obtenir un pied de page collant pour travailler sur une page sensible en utilisant le framework Foundation. Il semble que le pied de page ne reconnaisse pas la hauteur du contenu de l'article. J'ai essayé de jouer avec le positionnement, les solutions javascript et les solutions CSS courantes, mais rien ne semble fonctionner. Des indices sur ce qui pourrait mal tourner? Je devine qu'il y a quelque chose de super évident que je suis juste en train de regarder, mais je ne peux pas le trouver!

Voici le code: 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

Ceci est dû à tout le positionnement que vous faites. Supprimez simplement tout le positionnement et l'indexation z et utilisez l'ordre normal des éléments. Pour l'article supérieur, vous pouvez définir une marge supérieure négative pour obtenir le chevauchement:

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