Coding Cookbook/Resizable Window
Appearance
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>