반응형
프론트 작업을 하던 도중, 상단에 있던 내비게이션 바를 하단으로 고정해달라는 요청을 받아 페이스북의 내비게이션의 바처럼 스크롤을 내려도 내비게이션의 바가 하단에 고정되게 하는 방법에 대해 한번 알아봤습니다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
#footer {
position: fixed;
background-color: green;
left: 0;
right: 0;
bottom: 0;
height: 6rem;
}
#contetns {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 6rem;
}
</style>
</head>
<body>
<div id="contents">
<h1>LIST01</h1>
<h1>LIST02</h1>
<h1>LIST03</h1>
<h1>LIST04</h1>
<h1>LIST05</h1>
<h1>LIST06</h1>
<h1>LIST07</h1>
<h1>LIST08</h1>
<h1>LIST09</h1>
<h1>LIST10</h1>
</div>
<div id="footer"></div>
</body>
</html>
여기에 스타일 속성을 주게 되면! (<head> 태그 내에 삽입)
<style>
#footer {
position: fixed;
background-color: green;
left: 0;
right: 0;
bottom: 0;
height: 6rem;
}
</style>
위와 같이 크롬 창을 아래로 늘려도 하단 바 영역이 하단에 고정되게 됩니다.
참 쉽죠..? ㅎㅎ
📋 전체 코드
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
#footer {
position: fixed;
background-color: green;
left: 0;
right: 0;
bottom: 0;
height: 6rem;
}
</style>
</head>
<body>
<div id="contents">
<h1>LIST_1</h1>
<h1>LIST_2</h1>
<h1>LIST_3</h1>
<h1>LIST_4</h1>
<h1>LIST_5</h1>
<h1>LIST_6</h1>
<h1>LIST_7</h1>
<h1>LIST_8</h1>
<h1>LIST_9</h1>
<h1>LIST_10</h1>
</div>
<div id="footer"></div>
</body>
</html>
반응형
'🌐WEB' 카테고리의 다른 글
| [CSS] display: none 과 visibility: hidden의 차이 (0) | 2022.02.17 |
|---|---|
| [CSS] 선택자에서 꺽쇠 > 의 의미는? (자식 선택자, 하위 선택자) (4) | 2022.02.10 |
| [WEB] 회원가입 창 만들기 (HTML, CSS, JS / 입력형식체크, 문자인증 기능추가) (12) | 2021.10.23 |
| [CSS3] CSS 포지션(position) 잡기 - static, absolute, fixed, relative (0) | 2021.10.11 |
| [CSS3] 텍스트가 영역을 벗어날 때 해결법 (overflow 속성) (0) | 2021.10.11 |