footer 하단 고정하기

프리랜서로서의 퍼블리싱은 처음인 나에게.. footer의 시련이 찾아왔다.!

position: absolute, fixed 둘다 해봤지만 contents의 길이가 길어지면 소용이 없었다.

위의 position속성은 모달이나 툴팁 요론쪽에 더 적합한 속성인듯하다.

<div class='contents'></div>
<div class='footer'></div>

위의 상황이라면

html, body {
  width: 100%;
  height: 100%;
}

.contents {
  height: auto;
  min-height: 980px;
  padding-bottom: 280px;
  background-color: #f2f7ff;
}

.footer {
  background-color: #0a1630;
  height: 280px;
  position: relative;
  transform: translateY(-100%);
}

위와같은 css를 구성하면된다.

• body의 height를 100%로 해야 footer밑으로 공백이 생기지 않는다.
• content의 min-hgieht를 잘 조절해야 한다. 원래는 100%로 주면 되지만 위에 header가 있을경우 스크롤이 과하게 발생한다.
• footer의 height만큼 contents 의 padding-bottom값을 줘야한다. 그래야 contents하단 화면의 일부를 가리지 않을 수 있다.
• contents의 height를 auto로 주면서 footer의 transform: translateY(-100%)에 의하여 footer의 높이만큼 올려치기가 되면서 페이지의 하단에 잘 위치하게 된다.