기능: footer 영역 하단 고정 (fixed 아님)

컨텐츠 영역에 컨텐츠가 적은 경우, 푸터가 화면 아래쪽에 고정되어 있지 않고 위로 올라오게 된다.

이 때 position: fixed; 가 아닌 방법으로 푸터를 하단에 고정 시키는 방법을 찾아봄

html

<div id="wrap>
  <main id="container">컨테이너 영역</main>
  <footer id="footer">푸터영역</footer>
</div>

css

html, body {height: 100%;}
#wrap {min-height: 100vh; position: relative;}
#container {padding-bottom: 200px;} /* footer height */
#footer {width: 100%; height: 200px; position: absolute; bottom: 0;}

-> container영역의 padding-bottom값과 footer의 height값은 푸터의 높이값으로 동일하게 주면 된다.

설명

• wrap에 min-height: 100vh; 를 주어 컨텐츠가 짧아도 꽉찬 높이를 가지게 함
• footer의 부모요소인 wrap에 position: relative;를 줌
• 자식요소인 footer에 position: absolute; bottom: 0;을 주어 화면 최하단에 고정

이슈

1. 메인페이지 이외에만 적용을 하고 싶었는데 footer가 include <? include VIEWS_PATH.'/_include/footer.php' ?> 로 들어가 있어 메인만 따로 푸터를 붙여야 할지, 다른 방법이 있는지 모색

   해결: 메인페이지의 main_container 선택자 하단에 footer선택자를 추가, 여기에만 position: inherit; 를 넣어 absolute 속성을 해제해주었음

   #main_container {
     #footer {position: inherit;}
   }