이야기에 앞서
엘리멘터의 푸터는 Post Content 영역 바로 다음에 위치한다. 따라서 페이지 내용이 스크롤을 유발할만큼 충분한 높이를 갖지 못하면 브라우저 하단에 공백이 발생하는데, 보통 로그인 페이지, 결과물이 적은 검색 결과, 404 에러 페이지 따위에서 그 문제가 잘 나타난다.
엘리멘터의 헤더와 본문부, 푸터는 body 요소의 자식이며 flex 컨테이너이므로 CSS를 사용해 간단히 문제를 해결할 수 있다.
코드
이 코드는 Imran Siddiq – Web Squadron의 Remove the Gap below the Footer 영상에 포함된 스니펫이다. html과 body(.elementor-page) 요소의 높이를 100%로 설정하고, flex 속성에 의해 공간을 분배하는 특성에서 footer에 margin-top: auto를 사용하는 것이 핵심이다.
일반적인 상황에서는 문제가 없지만, 직접 워드프레스의 테마파일을 수정하여 DOM 요소의 구조를 변경한 경우에는 주의해야 한다. 즉, body 요소 내부에는 헤더와 본문부, 그리고 푸터에 해당하는 단 3개의 요소만 존재해야 한다.
CSS 코드는 웹사이트 전역보다는 특정 페이지에만 명시하는 것이 좋겠다. 엘리멘터 편집화면에서 최상위 컨테이너의 Custom CSS 필드에 코드를 삽입하도록 한다. 무료 버전 사용자는 HTML Widget에 명시한다.
코드 개선
이전 코드는 엘리멘터 무료 버전 사용자의 다이나믹 푸터에 대한 대응이 없고, 컨텐츠가 중앙에 위치하지 않아 추가적인 조치가 필요하다. 따라서 더 단순하면서도 효과적으로 코드를 개선해 보자.
이 코드는 푸터 클래스를 명시적으로 선택하지 않으므로 엘리멘터 무료 사용자 혹은 아예 엘리멘터 플랫폼이 아닌 곳에서도 제대로 작동한다. gap은 디바이스의 높이가 너무 작을 경우에 헤더, 본문, 푸터 사이의 간격을 보장한다.
다운로드
위 코드를 이용해 헤더와 푸터가 있는 경우와 없는 경우의 페이지에 대응하는 엘리멘터 템플릿을 준비하였다. 템플릿은 404 Error 템플릿이며 Elementor Pro가 필요하다. 해당 템플릿 내부 컨테이너를 복사해 빈 템플릿에 붙여 넣으면 지금까지 설명한 내용들이 모두 적용된다.