스크롤 시 푸터를 하단에 유지하는 방법 (fixed 아님)

2020. 11. 23. 00:25 | 댓글 4

워드프레스 인기 테마 중 하나인 OceanWP에서 본문의 콘텐츠가 적으면 하단의 푸터가 본문 바로 아래에 위치하여 브라우저에서 볼 때 푸터 아래에 여백이 있어 보기가 좋지 않습니다.

본문 콘텐츠 길이가 매우 짧더라도 푸터는 하단에 유지되도록 하는 것이 보기에 좋을 수 있습니다. 일부 테마에서는 본문 콘텐츠가 짧아도 푸터가 하단에 유지됩니다. 베스트셀링 테마인 아바다 (Avada) 테마의 경우 확인해보니 본문 콘텐츠 길이가 짧으면 OceanWP와 비슷한 현상이 발생하는 것 같습니다. 아래 그림가 같이 푸터 아래에 여백이 생깁니다.

스크롤 시 푸터를 하단에 유지하는 방법 (fixed 아님)

콘텐츠 길이가 짧더라도 푸터가 하단에 유지되도록 하거나 스크롤 시에 푸터가 위로 따라 올라오는 경우 CSS를 사용하여 푸터를 하단에 유지되도록 할 수 있습니다. 참고로 position: fixed;를 사용하여 푸터를 하단에 항상 고정되어 표시되도록 할 수 있지만, 이것은 원하는 바가 아닐 수 있을 것입니다.

CSS를 사용하여 푸터를 하단에 유지하는 방벙에 대해 간략히 살펴보겠습니다. 이와 관련하여 How to stick footer to bottom (not fixed) even with scrolling라는 stackoverflow 글이 있지만, 저는 테스트해보니 잘 작동하지 않았습니다. 이 문서에서 제시하는 방법으로 가능한지 먼저 테스트해보시기 바랍니다.

HTML 예시:

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

HTML 구조와 위와 비슷하다면 다음과 같은 CSS 코드를 응용하여 푸터를 하단에 유지시킬 수 있습니다.

CSS 예시:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* 푸터 높이 */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* 푸터 높이 */
}

예를 들어, 워드프레스 OceanWP 테마에서는 다음과 같은 CSS 코드로 테스트해볼 수 있습니다.

#wrap {
    min-height: 100vh;
}

#main {
    padding-bottom: 102px;
}

.site-footer {
    position: absolute !important;
    bottom: 0;
    width: 100%;
    height: 102px;

} 

height 값을 적절히 변경하여 마음에 들도록 푸터가 하단되도록 시도해보시기 바랍니다.

아바다 테마에서는 테스트해보지 않았지만, 이론상 위의 방법으로 가능할 것 같습니다.

참고

avada.tistory.com/2049

 

워드프레스 아스트라 테마: Header Footer Builder 도입

워드프레스 인타 테마 중 하나인 아스트라 테마는 현재 100만 개 이상 사이트에 설치되어 사용되고 있습니다. Astra 테마에서 간단하게 요소를 끌어서 놓는 방식으로 헤더와 푸터를 만들 수 있는 H

avada.tistory.com

 

 

워드프레스 쿠팡 파트너스 상품글 자동 포스팅 수익화 - 워드프레스 정보꾸러미

해외에서는 아마존 상품을 소개하여 수수료를 받을 수 있지만, 아마존이 국내에 진출하지 않아서 아마존 어필리에이트는 큰 효과는 없을 것입니다. 우리나라에서는 쿠팡 파트너스 프로그램을

www.thewordcracker.com

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    空空(공공)

    필요하신분들에게는 좋은 가이드가 되겠습니다
    날이 많이 차갑네요
    따뜻한 한주 시작하시기 바랍니다^^

  2. thumbnail
    쓰윔

    absolute로 둔 다음에 Bottom을 0으로 둬서 사용하는 방법이군요.
    혹시 Flexbox로 레이아웃을 짜신다면 margin-top:auto로 해도 가장 밑에 고정이 됩니다.
    실제로 제 블로그 푸터에도 이 방법을 적용 중입니다.