footer 만들기, 겹치는 오류 잡기

문제 발생

웹사이트에 footer 를 만들었다. 하지만 나는 이 footer가 항상 웹페이지 맨 아래에 위치하게 하고 싶다. 하지만 그냥 div 로 만든다면 컨텐츠가 부족한 페이지에서는 맨 밑에 가지 않고 떠있는 패고싶은 상황이 생긴다. 그래서 나는

1. 항상 바닥에 붙어있는

2. 다른 컨텐츠(overflow가 일어나도)와 겹치지 않는 footer

이 2가지의 성질을 가지고 있는 footer를 만드려고 한다

뭔 거지같은 footer

해결 방법

이런 그지같은 것을 피하는 방법은 간단하다

 

<footer style="width: 100%; z-index: 1; bottom:0; position: fixed;"></footer>

자 설명.

bottom:0 -> 맨 바닥에 붙인다.

position: fixed -> 거기 가만 있어라.

z-index: 1 -> z-index 의 값이 높은 것이 더 위에 올라오게 한다.

 

1. 항상 바닥에 붙게 만든다

2. 다른 것들과 겹치지 않는다 

모든게 해결된 완벽한 footer