Coding Cookbook/Resizable Window
Jump to navigation
Jump to search
Dynamic HTML solution[edit | edit source]
<html><head>
<script>
window.onload = updateLayout;
window.onresize = updateLayout;
function updateLayout() {
var vpWidth, vpHeight
// 1. Bepaal viewport (venster) afmetingen
if(self.innerHeight) { // all except Explorer
vpWidth = self.innerWidth;
vpHeight = self.innerHeight;
}
else if (document.documentElement &&
document.documentElement.clientHeight) { // IE6 Strict
vpWidth = document.documentElement.clientWidth;
vpHeight = document.documentElement.clientHeight;
}
else if (document.body) { // other Explorers
vpWidth = document.body.clientWidth;
vpHeight = document.body.clientHeight;
}
// 2. Geef elementen juiste pixel-formaat
document.getElementById('main' ).style.height =
((vpHeight < 50) ? 0 : vpHeight - 50) + 'px';
document.getElementById('footer').style.top =
((vpHeight < 50) ? 0 : vpHeight - 50) + 'px';
}
</script><style>
HTML, BODY {height: 100%; width: 100%;}
HTML {overflow: hidden;}
BODY {margin: 0px;}
#main {position: absolute; left: 0px; top: 0px; height: 550px; width: 100%;
overflow: auto;}
#footer {position: absolute; left: 0px; top: 550px; height: 50px;
width: 100%; overflow: hidden;}
</style></head><body>
<div id='main'>Main contents here</div>
<div id='footer'>Footer contents here</div>
</body></html>