footer 영역 항상 하단에 고정하기
# Work/HTML/CSS 2011. 1. 21. 14:20 |반응형
footer 영역 항상 하단에 고정하기
IE6.0 은 코드를 꼭 따로 줘야함.
- css 부분
/* Common */
html, body { height: 100%; margin: 0; padding: 0; font-size: 12px; font-family: "돋움"; color:#444;}
/* Layout */
#head { position: relative; z-index: 1; height: 260px; margin:0 auto; text-align:center; background:red;} /* 높이값을 꼭 줘야 함*/
#body { min-height: 100%; margin: -260px 0 -70px; background:blue; } /* head 의 높이값과 footer 의 높이값 */
#content-area { padding: 260px 0 70px;}
* html #body { height: 100%; } /* for IE6.0 */
#footer { height:70px; text-align:center; background:yellow;}
- html 부분
<body>
<div id="head">
head
</div>
<div id="body">
<div id="content-area">
content
</div>
</div>
<div id="footer">footer</div>
반응형
'# Work > HTML/CSS' 카테고리의 다른 글
| 파비콘 적용시키기. (0) | 2011.02.27 |
|---|---|
| [용어정리] (0) | 2011.01.21 |
| css 핵 종류 (0) | 2011.01.14 |
| Skip Navigation(건너뛰기 링크) (0) | 2011.01.14 |
| <noscript>란? (0) | 2011.01.13 |
호정찐 
