CSS로 페이지 하단에 footer를 고정하는 최상의 방법





HTML과 CSS를 충분히 이해를 못한 상태에서 푸터(footer)가 최하단에 고정된 웹페이지를 디자인하게되면 모든게 굉장히 애매하고 어렵습니다.

문제점


아마 위의 사진과 같이, footer의 하단에 흰공백이 있고 footer를 최하단에 붙이려고 해도 붙지않는 상황을 갖고 계실거라 생각합니다. 제가 지금의 문제에 대해서 설명을 하자면, 여러분들이 고정 높이의 스태틱 웹페이지를 만들고 계시지 않는 이상, 웹사이트는 여러분들이 입력한대로 작동하고 있다는 것입니다.

높이를 자동(height: auto;)으로 변환하는 웹사이트를 만드는 경우, 사실 footer는 항상 최하단에 위치하고 있습니다. 하지만 우리가 footer의 컨테이너인 body의 높이를 고정 값으로 지정하지 않았기 때문에, footer는 단순이 현재 자신의 컨테이너의 높이에 맞추어서 위치되는 것 뿐입니다. 그리고 우리들은 그 상황을 우리들이 사용하는 기기의 화면을 기준으로 생각하기 때문에, footer가 최하단에 고정이 안된다고 생각하거나 빈 공간을 만들어낸다고 생각하는 겁니다.

해결법

단순히 footer 하단의 공간을 덮어버리고, 웹페이지의 높이를 늘릴만한 양의 콘텐츠가 웹페이지 내부에 없는 것이기 때문에, footer 상단의 컨테이너(엘리먼트; 요소; eg. main)에 충분한 최소 높이를 부여함으로써 문제를 해결할 수 있습니다.

index.html

<html>
<head>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>

style.css

html { ... }
body { ... }
header { background-color:#000; height: 300px; }
main { min-height:100vh; }
footer { background-color:#000; height: 300px; }


'min-height'는 페이지 요소의 최소 높이를 설정할 수 있는 코드이고 100vh는 100% 뷰 포트 높이를 나타냅니다.

뷰 포트는 웹페이지를 출력하는 총공간의 크기입니다.

min-height: 100vh;를 footer 상단의 웹페이지 요소에 적용함으로서, footer를 항상 최하단에 고정 시킬 수 있습니다.

댓글 없음:

댓글 쓰기