[CSS] footer 바닥에 고정시키기

728x90

안녕하세요 yunamom 입니다 :D

이번 포스팅 에서는 footer 하단에 고정시키는 방법에 대하여 알아보겠습니다.

웹프로그램을 공부할때 footer 고정시키는 방법으로 아래와 같은 코드를 많이 사용하게 됩니다.

<body>

<div id="wrap"> 
<footer> footer </footer>
</div>

</body>

#wrap{	
	background: pink;
}
footer{ 
	position:absolute;
	bottom:0px;
}

이 경우 본문의 내용이 길어지면 footer 가 덮어 씌워지게 되는데요.

div 태그에 높이, 포지션 코드를 추가해주면 footer 를 하단에 고정시킬수 있습니다.

#wrap{
	min-height: 100%;
	position: relative;
	background: pink;
}
footer{
	bottom: 0px;
	position: absolute;
	height: 10rem;
	background: yellow;
}

이외에도 footer 를 하단에 고정시키는 많은 방법들이 있겠지만, 오늘은 stackoverflow 에서 발견한 초간단 코드를 알려드리겠습니다.

<body>

<div id="wrap"> 
/* 본문 내용 */
</div>
<footer> footer </footer>

</body>

#wrap{
	min-height: calc(100vh - 10rem); /* footer 높이를 빼준다. */
	background: pink;
}
footer{
	height: 10rem; /* footer 높이 */
	background: yellow;
}

calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수로

브라우저의 크기에 따라 요소의 너비가 높이가 변화해야하는 경우 사용하기 적절합니다.

*주의할점 +와 - 양 옆에 띄어쓰기를 꼭 해줘야 함

728x90

Study with yuna🌷