We usually design web page layout by DIV+CSS. In some cases we need more flexibility in layout design which can further be achieved by JavaScript. The following is an example of layout by JS in which there is a page header, a left navigation bar and a main body DIV. The size of the ‘main’ DIV is dynamic that gets updated each time the window is resized.
<html> <head> <style type="text/css"> body { background: #000000; margin: 0; } #header { height: 60px; background: #880000; } #sidebar { background: #000088; width: 200px; height: 350px; } #main { position: absolute; left: 200px; top: 60px; background: #909090; } </style> <script type="text/javascript"> function adjust() { var mainW, mainH; if (parseInt(navigator.appVersion)>3) { if (navigator.appName == "Netscape" || navigator.appName == "Opera") { // for FF, Opera use window.innerWidth and window.innerHeight mainW = window.innerWidth - 210; mainH = window.innerHeight - 90; } else if (navigator.appName.indexOf("Microsoft") != -1) { // for IE use document.body.offsetWidth and document.body.offsetHeight mainW = document.body.offsetWidth - 230; mainH = document.body.offsetHeight - 110; } } var main = document.getElementById('main'); main.style.width = mainW + 'px'; main.style.height = mainH + 'px'; } </script> </head> <body onload='adjust()' onresize='adjust()'> <div id='header'></div> <div id='sidebar'></div> <div id='main'></div> </body> </html>
