Flex를 사용해서 Footer를 간단하게 하단에 고정하는 방법 입니다.
1. body에min-height: 100vh;display: flex;flex-direction: column;속성 추가
2. content 영역에flex-grow: 1;속성 추가
🅱️ootstrap
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap footer 고정</title>
<style>
header {
height: 100px;
background-color: cadetblue;
}
div {
height: 100px;
background-color: burlywood;
}
footer {
height: 100px;
background-color: yellowgreen;
}
</style>
</head>
<body class="d-flex flex-column min-vh-100">
<header>
<h1>해더</h1>
</header>
<div class="flex-grow-1">
<h1>메인</h1>
</div>
<footer>
<h1>푸터</h1>
</footer>
</body>
</html>
🅲ss
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css footer 고정</title>
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
height: 100px;
background-color: cornflowerblue;
}
div {
flex-grow: 1;
height: 100px;
background-color: burlywood;
}
footer {
height: 100px;
background-color: paleturquoise;
}
</style>
</head>
<body>
<header>
<h1>헤더</h1>
</header>
<div>
<h1>메인</h1>
</div>
<footer>
<h1>푸터</h1>
</footer>
</body>
</html>
Backend engineer