트러블 슈팅 💫

🚨 문제 상황

image.png

콘텐츠가 짧은 경우 푸터가 위로 올라오는 이슈가 발견되었다.

🤔 문제 원인

image.png

👉 요소가 차례대로 쌓이도록 html 구조를 구성했기 때문

💡 해결 방법

footer 이외의 요소들을 div class=”wrap” 요소로 감싸준다

image.png

html 구조를 바꿔줬으면 스타일을 조정해 줄 차례이다.

우선 footer의 height 길이에 고정값을 주고 그 값을 wrap 요소의 padding-bottom 값으로 준다.

$footer-height-lg: 124px;
$footer-height-md: 104px;
$footer-height-sm: 80px;

html,
body {
  height: 100%;
}

.wrap {
  min-height: 100%;
  padding-bottom: dimensions.$footer-height-lg;

  @include responsive.responsive(T) {
    padding-bottom: dimensions.$footer-height-md;
  }

  @include responsive.responsive(M) {
    padding-bottom: dimensions.$footer-height-sm;
  }
}

그리고 padding-bottom 으로 생긴 여백에 footer가 올 수 있도록

footer를 자기 자신의 길이만큼 transform: translateY(-100%); 이동시킨다.