1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Determine Div Height Based On Screen Height

Discussion in 'JavaScript' started by darren132, Jan 23, 2008.

0
  1. #1
    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):
     
    darren132, Jan 23, 2008 IP
  2. webwurks

    webwurks Well-Known Member

    Messages:
    119
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    118
    #2
    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>
     
    webwurks, Jan 25, 2008 IP
    darren132 likes this.
  3. darren132

    darren132 Well-Known Member

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    108
    #3
    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.
     
    darren132, Jan 26, 2008 IP
  4. locdev

    locdev Active Member

    Messages:
    171
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #4
    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:
     
    locdev, Jan 28, 2008 IP
  5. darren132

    darren132 Well-Known Member

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    108
    #5
    Wow, yours seems simplified.
     
    darren132, Jan 28, 2008 IP