Foundation 6의 끈적한 바닥 글

Question

저는 Foundation 프레임 워크를 사용하여 반응이 빠른 페이지에서 작동하도록 끈적한 바닥 글을 얻는 데 몇 가지 문제가있었습니다. 꼬리말이 기사 콘텐츠의 높이를 인식하지 못하는 것 같습니다. 나는 포지셔닝, 자바 스크립트 솔루션 및 일반적인 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; 
}