[CSS] 콘텐츠의 길이와 상관 없이 footer 하단 고정

CSS

[CSS] 콘텐츠의 길이와 상관 없이 footer 하단 고정

hid1 2022. 6. 10. 13:39

🚩목표

콘텐츠의 길이와 상관 없이 footer를 하단에 고정시켜야 한다.

header의 경우 스크롤을 내릴시 상단고정이 되어야 한다면 position:fixed를 사용하면 된다.하지만 footer의 경우 스크롤이 생길 때 항상 고정되어 있어 어색하다.position: absolute로 하단에 위치해보아도 콘텐츠가 길어져 스크롤이 넘어서면 하단에 위치하지 않게 된다.

💡방법 : min-height

min-height를 이용해 화면에 꽉채우게 한다.

height의 기본 속성은 auto이니 컨텐츠의 길이가 화면보다 짧으면 화면이 꽉차게 나오고 길다면 길이만큼 스크롤이 발생

<!-- html -->
<body>
	<header>Header</header>
	<div class="content">Content</div>
	<footer>Footer</footer>
</body>

/* css */

* {
	box-sizing: border-box;
}

header {
	width: 100%;
	height: 60px;
	position: fixed;
	top: 0;
 	z-index: 9;
}

.content {
	min-height: calc(100vh - 30px);
	padding-top: 60px;
}

footer {
	width: 100%;
	height: 30px
}

content 영역

min-height : calc(100vh - footer height 값))
padding-top : header의 height 값

문제점 : vh 단위에 대하여

PC 브라우저에서는 문제 없어 보이던 부분이 모바일에서는 스크롤이 발생한다.

이유는 100vh 단위를 사용하면 모바일에서는 상하단의 바 영역을 반영하지 못하기 때문에

상단 주소창의 윗부분부터 Viewport로 인식하게 된다.

해결방법 1 : % 단위를 쓰기

/* css */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

header {
	width: 100%;
	height: 60px;
	position: fixed;
	top: 0;
	z-index: 9;
}

.content {
	min-height: calc(100% - 30px);
	padding-top: 60px;
}

footer {
	width: 100%;
	height: 30px;
}

height: 100%는 요소의 부모요소 너비 기준으로 100%로 채운다는 의미이다.

그렇기 때문에 html과 body요소에도 height: 100%를 주었다.

!리액트 사용시 : #root, #root > div에도 height: 100%을 적용해야 한다.

해결방법 2 : JS window.innerHeight 이용

The trick to viewport units on mobile | CSS-Tricks

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own

css-tricks.com

/* css */

.content {
	height: calc(var(--vh, 1vh) * 100);
}

// javascript

let vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)
window.addEventListener('resize', () => {
  let vh = window.innerHeight * 0.01
  document.documentElement.style.setProperty('--vh', `${vh}px`)
})

var() 함수를 사용하여 CSS 사용자 속성 --vh 변수를 생성 후 window.innerHeight를 담는다.

CSS var() 함수는 사용자 지정 속성, 또는 "CSS 변수"의 값을 다른 속성의 값으로 지정할 때 사용한다.
첫 번째 인수는 값을 가져올 사용자 지정 속성의 이름이다.
선택적으로 제공할 수 있는 두 번째 인수는 대체값으로, 대상 사용자 지정 속성이 유효하지 않은 경우 대신 사용한다.

생각해볼점

header, content, footer 요소를 container로 감싸진 레이아웃로 만든 다음

flex나 grid 속성을 이용해 굳이 header와 footer 길이를 가져와 계산하지 않을 수 있다.

<!-- html -->

<body>
	<div id="container">
		<header>Header</header>
		<div class="content">Content</div>
		<footer>Footer</footer>
	</div>
</body>

flex 사용

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

#container {
	height: 100%;
	display: flex;
	flex-direction: column;
}

header {
	width: 100%;
	height: 60px;
	position: fixed;
	top: 0;
	z-index: 9;
}

.content {
	flex-grow: 1;
	padding-top: 60px;
}

footer {
	width: 100%;
	height: 30px;
}

grid 사용

/* css */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,body {
	height: 100%;
}

#container {
	height: 100%;
	display: grid;
	grid-template-rows: 1fr 30px;
}


header {
	width: 100%;
	height: 60px;
	position: fixed;
	top: 0;
	z-index: 9;
}

.content {
 	padding-top: 60px;
}

footer {
 	width: 100%;
}

gird 아이템 요소에 position: fixed 속성을 쓰면 grid formatting context에서 제거된다.

content와 footer에 각각 1fr와 30px을 적용하였다.