- 정보공유
[퍼블리싱] div 기본 레이아웃 샘플
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebBrochure</title>
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
font: 62.5% Verdana;
margin: 0em;
padding: 0em;
}
div {
margin-right: auto;
margin-left: auto;
}
div#container {
height: auto !important;
height: 100%;
min-height: 100%;
background: #82C71B;
width: 80em;
}
div#header {
height: 10em;
background: #FF9999;
width: 78em;
}
div#content {
width: 74em;
overflow: auto;
background: #FFFFFF;
padding-right: 1em;
padding-left: 1em;
}
div#footer {
height: 5em;
width: 78em;
background: #999999;
}
</style>
<script type="text/javascript">
window.onload = function() {
contentHeight();
}
window.onresize = function() {
contentHeight();
}
function contentHeight() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
var headerHeight = document.getElementById('header').offsetHeight;
var footerHeight = document.getElementById('footer').offsetHeight;
var contentElement = document.getElementById('content');
//alert("windowHeight:"+windowHeight+",\nheaderHeight: "+headerHeight+", \nfooterHeight:"+footerHeight);
contentElement.style.height = (windowHeight - (headerHeight + footerHeight)) + 'px';
}
}
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight ;
} else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
</script>
<div id="container">
<div id="header">HEADER</div>
<div id="content"><b>CONTENT</b></div>
<div id="footer">FOOTER</div>
</div>