Determine Div Height Based On Screen Height

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

  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:
    126
    Likes Received:
    37
    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