I have a header div (90px), content div, and a footer div (50px). I need javascript to determine the content height based on the users screen height minus header and footer height. It needs to work with FF 1.5+ and IE 5+ This is what I have so far, but it doesn't work: <head> <script type="text/javascript"> //<![CDATA[ onLoad=function() { VAR screenHeight = screen.height; VAR header = document.getElementById('header').offsetHeight + "px"; VAR footer = document.getElementById('footer').offsetHeight + "px"; document.getElementById('content').style.height = screenHeight - (header + footer) + "px"; } //]]> </script> </head> <body> <div id='header'> </div> <div id='content'> </div> <div id='footer'> </div> </body> Code (markup):
I had to move the javascript past the div declarations and pulled it out of the onLoad function call but it seems to work now. I also added a var for the est. browser tool bar size. One of your main problems was the added (+ "px") to the footer and header vars then trying to use them as Integers in detemining the content size. Here's what I came up with: <head> </head> <body onLoad="divSize();"> <div id='header' style="border-width:2px; border-color:#000000; border-style:solid; height:90px;"> </div> <div id='content' style="border-width:2px; border-color:#ff0000;border-style:solid;"> </div> <div id='footer' style="border-width:2px; border-color:#0000ff; border-style:solid; height:50px;"> </div> <script type="text/javascript"> //<![CDATA[ var screenHeight = screen.height; var browserToolBarHeight = 220; var header = document.getElementById('header').offsetHeight; var footer = document.getElementById('footer').offsetHeight; var contentH = screenHeight - (header + footer+browserToolBarHeight) + "px"; document.getElementById('content').style.height = contentH; alert("ScreenH "+screenHeight+" headerH "+header+" FooterH "+footer+" ContentH "+contentH); //]]> </script> </body>
Thanks for replying webwurks! It's been a couple of days since someone replied to my question. I was able to get the code to work. Thanks again.
I use this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head><title> New Document </title></head> <body style="margin:0px"> <div id="rootTable"> <table> <tr><td>header</td></tr> <tr><td id="maxHeightRow">content</td></tr> <tr><td>footer</td></tr></table> </div> </body> <script language="javascript" type="text/javascript"> document.getElementById("maxHeightRow").style.height=document.body.offsetHeight - (document.getElementById("rootTable").offsetHeight-document.getElementById("maxHeightRow").offsetHeight+0)+"px";//0 is padding. </script> </html> HTML: