[CSS] 푸터 하단에 고정시키기

See the Pen 푸터 하단에 고정시키기 by Facite (@facitea) on CodePen.

웹에서 흔히 나오는 방법으로

부모 요소에   position: relative;를 주고

자식 요소에   position: absolute;를 주면

 

absolute 특성상 부모를 무시하게 되므로

부모요소 내용이 많아질 경우에도 굳건히 자리를 지킨다.

 

 

해결방법 1

See the Pen 푸터 하단에 고정시키기 희망편 by Facite (@facitea) on CodePen.

작은 화면에서 보면 하단에 잘 붙어있는 것처럼 보이지만, 함정이 있다.

 

 

해결방법 2

See the Pen 푸터 하단에 고정시키기 종결편 by Facite (@facitea) on CodePen.

---

위에서 제시한 코드는 푸터가 스크롤을 맨 아래로 내렸을 때에 최하단에 존재하게 하는 코드이다.

모바일 화면을 만들려면 약간의 수정이 필요하다.

푸터를 화면의 하단에 고정시켜야 하기 때문이다.

 

See the Pen 푸터 하단에 고정시키기 모바일 by Facite (@facitea) on CodePen.

이런 식으로 wrapper에 height 100%을 주고

section에 flex-grow: 1, overflow-y: auto를 주면 된다.

    .wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
      background-color: green;
    }

    section {
      flex-grow: 1;
      overflow-y: auto;
    }