You have to give .middle a fixed height to do that, eg, 85%. Unfortunately you cannot use a percentage because your header has a fixed pixel size. Either you change that, or you set the height with javascript, eg:
MainDiv = document.createElement('div');
if (navigator.appName == "Microsoft Internet Explorer") {
MainDiv.style.height = document.documentElement.scrollHeight-250;
} else {
MainDiv.style.height = document.body.scrollHeight-250;
}
- MainDiv = document.createElement('div');
- if (navigator.appName == "Microsoft Internet Explorer") {
- MainDiv.style.height = document.documentElement.scrollHeight-250;
- } else {
-
- MainDiv.style.height = document.body.scrollHeight-250;
- }
will work. However, you must create the element using DOM methods (createElement) -- you cannot set the height of an existing element found with getElementById(). Ie, if you have not used DOM before, "MainDiv" has NO corresponding html in the page. It is created entirely from nothing in the js. If you want it inside another div that is in the html, you need to getElementById for that div and appendChild.
IMPORTANT: you will not get the height correct if you do this in a script called from <head>. The page must load first, so you call the script
at the end of the <body>.You don't need to set all the style that way, you can:
MainDiv.setAttribute("className","somecssclass");
Just don't have a "height" component in the css code.
Pretty sure this is only possible using javascript, so if you don't want to go that route you have to assign everything a percentage (eg, your header is 15% offset 5%, the .middle is 75% offset 20%).
