Military Videos - Fast Loans - Mortgage Calculator - Share Prices - Music Lyrics
PDA

View Full Version : Determine Div Height Based On Screen Height

darren132
Jan 23rd 2008, 12:09 pm
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>
webwurks
Jan 25th 2008, 6:08 pm
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>
darren132
Jan 26th 2008, 2:43 pm
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.
locdev
Jan 28th 2008, 5:31 am
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>
darren132
Jan 28th 2008, 4:03 pm
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>


Wow, yours seems simplified.