position:fixed를 사용하면 컨텐츠 양에 상관 없이 항상 브라우져 하단에 고정되어 있는 footer를 보게 됩니다.
컨텐츠 양이 많을 경우 컨텐츠가 끝나는 지점에 footer를 고정시키기 위해서는 아래와 같이 심플한 소스를 사용하시면 됩니다.
<!DOCTYPE html>
<HEAD>
<TITLE>footer 하단 고정</TITLE>
</HEAD>
<style tyle="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
position:relative;
min-height:100%;
}
#header {
height:70px;
background:#ccc;
}
#container {
padding:20px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:70px;
background:#ccc;
}
</style>
<BODY>
<div id="wrapper">
<div id="header">header</div>
<div id="container">나는 container입니다.
</div>
<div id="footer">footer</div>
</div>
</BODY>
</HTML>
출처 : http://www.webmadang.net/script/script.do?action=read&boardid=3002&page=1&seq=37
'프론트엔드 개발 놀이터 > css, design' 카테고리의 다른 글
| Lottie (로티) json 애니메이션 (0) | 2020.02.28 |
|---|---|
| Flat Color Hex Codes (0) | 2020.02.27 |
| 파비콘(Favicon)의 모든 것 (0) | 2020.02.24 |
| CSS3 미디어쿼리 @media 규칙 이해 (0) | 2020.02.21 |
| 홈페이지에 적절한 Favicon 사이즈는? (0) | 2020.02.18 |