나나나
[HTML&CSS] Content에 상관없이 Footer 하단에 고정하기 본문
원본 출처
CSS3 Layout | PoiemaWeb
poiemaweb.com
<기본구조>
<!DOCTYPE html>
<html>
<body>
<div id="wrap">
<header>
<nav>
<ul>
<li>...</li>
<li>...</li>
</ul>
</nav>
</header>
<div id="content-wrap">
<aside>
<ul>
<li>...</li>
<li>...</li>
</ul>
</aside>
<section>
<article>...</article>
<article>...</article>
</section>
</div>
<footer></footer>
</div>
</body>
</html>원본의 footer 부분 CSS
footer {
/* footer를 aside위에 올리기 위해 사용(부유객체) */
position: absolute;
height: 60px;
width: 100%;
padding: 0 25px;
line-height: 60px;
color: #8a8c8f;
border-top: 1px solid #dee5e7;
background-color: #f2f2f2;
}- footer를 하단에 고정시키기 위해 fixed를 사용하면 스크롤이 되어도 그 자리를 고수하기 때문에 본문을 가릴 수 있다.
- 그러므로 absolute로 설정하여 다른 요소가 공간을 차지하고 있어도 뒤로 밀리지 않고 그 위에 덮어쓰게 하도록 한다.
- 이는 Content 영역이 브라우저보다 작을 경우 다음과 같은 문제가 발생한다.
 |
 |
해결법1
html, body {
height: 100%
}
#wrap {
min-height: 100%;
position: relative;
padding-bottom: 60px;
}
footer {
bottom: 0;
}- 원본 코드에 위와 같은 코드를 추가하여 해결
- html과 body의 height를 100%으로 만들고 content영역이 브라우저보다 짧은 경우를 고려해 #wrap이 그 모든 영역을 사용하도록 min-height: 100%을 추가한다.
- footer에 bottom: 0을 추가하여 하단에 위치하도록 한다.
- position이 absolute인 footer가 #wrap영역을 기준으로 위치를 잡도록 #wrap에 position: relative를 추가한다.
- footer부분이 본문 내용을 가리지 않도록 footer의 height만큼 padding-bottom을 추가한다.(이를 위해 box-sizing은 border-box로 지정되어 있어야 함)
참고
- 원본 코드는 header와 content가 겹치는 현상을 해결하기 위해 #wrap에서 margin-top을 header의 높이만큼 지정하였다.
- 이로 인해 content가 브라우저 크기보다 작아도 margin만큼 스크롤을 해야 하단의 footer가 보이는 현상이 발생했다.
- 이는 #wrap의 margin-top을 padding-top으로 바꾸어 해결 가능하다.
- 아래 코드에서도 마찬 가지로 적용된다.
해결법 2
html, body {
height: 100%
}
#wrap {
min-height: 100%;
position: relative;
padding-bottom: 60px;
}
footer {
position: relative; (absolute -> relative)
transform: translatY(-100%);
}<!DOCTYPE html>
<html>
<body>
<div id="wrap">
<header>
<nav>
...
</nav>
</header>
<div id="content-wrap">
...
</div>
</div>
<footer></footer>
</body>
</html>- footer부분을 #wrap의 바깥으로 빼준다.
- footer의 position을 relative로 바꾼다.
- 여기까지 하면 #wrap의 min-height가 100%여서 content가 브라우저 크기보다 작아도 스크롤을 내려야만 footer가 보이는 현상이 발생한다.
- 그러므로 transform: translateY(-100%)를 통해 footer 크기만큼 끌어올려 준다.
정리
- footer까지 하나의 그룹으로 묶여 있을 때는 해결법 1을, footer만 따로 분리했을 때는 해결법 2를 사용하면 된다.
- 아예 바꾸는 것이 아니라 해당 코드를 추가하는 것이다.
- 여백이 발생하는 문제는 padding, margin을 보며 조정하면 된다.
'언어' 카테고리의 다른 글
| [Javascript] DOM(Document Object Model) (0) | 2021.06.11 |
|---|---|
| [Javascript] Javascript에서의 this (0) | 2021.06.09 |
| [Javascript] 함수 (0) | 2021.06.06 |
| [Javascript] 자바스크립트 Array Method(filter, map, reduce, sort) (0) | 2021.06.01 |
'언어' Related Articles
more
