종종 어떤 홈페이지에 Footer가 항상 최하단에 붙어있는 경우를 보게된다.
(ex http://mail.naver.com/, http://me.naver.com/index.nhn 등 로그인 페이지)
창의 크기에 상관없이. 그리고 창의 크기가 변화하여도 항상 최하단에 고정되어서 움직임.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Footer 하단밀착</title>
<style>
div.Index {
width:300px;
text-align:center;
margin:0px auto; padding:0px;
background-color:#09C; border-bottom:5px solid #000;
}
div.Index div.Text {
width:200px;
margin:0px auto; padding:0px;
background-color:#9C3;
}
div.Footer {
width:100%; height:20px;
margin:0px; padding:0px;
text-align:center;
background-color:#090;
}
</style>
</head>
<body style="margin:0px; padding:0px;">
<div class="Index" id="Index">
<div class="Text">
콘텐츠 시작
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
여기까지
</div>
</div>
<div class="Footer" id="Footer">COPYRIGHT</div>
<script>
var Height_Index = Number(document.getElementById("Index").clientHeight);
window.onload = changeContentSize;
window.onresize = changeContentSize;
function changeContentSize() {
var Height_Window = Number(document.documentElement.clientHeight);
var Height_Footer = Number(document.getElementById("Footer").clientHeight);
var ContentTop = Height_Window - Height_Footer - 5;
document.getElementById("Index").style.minHeight = Height_Index + 'px';
document.getElementById("Index").style.height = ContentTop + "px";
}
</script>
</body>