footer 영역 항상 하단에 고정하기
Sever 2015. 4. 27. 14:06반응형
출처:http://hjzzin.tistory.com/11
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>
반응형
'Sever' 카테고리의 다른 글
| What Is The Difference Between Static and Dynamic Websites? (0) | 2015.07.31 |
|---|---|
| a href onclick parameter 전달 방법 (0) | 2015.04.29 |
| [파이썬 Python] 날짜, 시간값의 연산법, 시간차이 구하기(몇시간, 몇분 전/후 등) (0) | 2015.04.07 |
| Using Google Cloud SQL (0) | 2015.04.07 |
| How to escape < and > inside <pre> tags (0) | 2015.04.06 |