[HTML/CSS] Footer 화면 아래에 고정시키는 방법

일반적으로 footer는 가장 아래에 들어가기 때문에 별도의 설정 없이도 가장 아래에 위치하는 경우가 대부분입니다.

 

하지만 로그인 페이지와 같이 페이지에 상대적으로 적은 데이터가 들어가는 페이지는 푸터가 하단에 붙어있지 않는 경우가 발생합니다.

 

 

 

이때 css를 이용하여 footer를 가장 아래로 내릴 수 있습니다.

 

 

 

1. html 코드 변경

우선 html 코드에서 footer를 제외한 나머지 body에 속한 태그를 감싸는 #body-content와,

footer와 #body-content를 모두 감싸는 #body-wrapper,

총 2가지의 div를 필요로 합니다.

 

※ header는 화면 상단에 계속 따라다니도록 absolute를 적용할 것이기 때문에 따로 넣지 않았습니다.

 

 

2. css 코드 변경

/* footer 하단 고정 [S] */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#body-wrapper {
    min-height: 100%;
    position: relative;
}

#body-content {
    margin-top: 100px;
    padding-bottom: 99999px; /* footer의 높이 */
}

footer {
    width: 100%;
    height: 99999px; /* footer의 높이 */
    position: absolute;  
    bottom: 0;
    left: 0;
}
/* footer 하단 고정 [E] */

css는 위의 코드를 그대로 쓰시면 됩니다.

이때 #body-content{ padding-bottom: }와 footer{ height: } 속성 크기는 footer의 높이를 맞춰주시면 됩니다. 

 

footer의 크기는 [f12] 또는 [ctrl+shift+c]를 통해 확인하실 수 있으며 현재 예제 페이지는 165px입니다.

 

 

 

3. result

코드를 수정 후 확인해보면 footer가 아래로 잘 내려가 있는 것을 확인할 수 있습니다.