Coding Cookbook/Resizable Window

Dynamic HTML solution
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'; } HTML, BODY {height: 100%; width: 100%;} HTML {overflow: hidden;} BODY {margin: 0px;} overflow: auto;} width: 100%; overflow: hidden;} Main contents here Footer contents here
 * 1) main {position: absolute; left: 0px; top: 0px; height: 550px; width: 100%;
 * 1) footer {position: absolute; left: 0px; top: 550px; height: 50px;