I am trying to dynamically set the height of the webpage content by subtracting the header and footer values from the window size and setting the content to this value on document load.

Each of the functions parameters takes in an element id in order to grab the element height; excluding the content parameter.

 function setH(header, content, footer) 
{
    winH = top.innerHeight;
    winTitle = 32; // height value of the window title (part of the header)
    headH = $(header).outerHeight(true);
    footH = $(footer).outerHeight(true);
    contentH = winH - winTitle - headH - footH;
    $(content).css({'height' : (contentH) + 'px','overflow-y' : 'scroll'});
}

The issue that I am running into is the outerHeight values are returning the wrong values. The header returns 23px and footer 40px.

When examining the elements in FF and Chrome the values are 25px and 44px.

I have tried using innerHeight,, outerHeight and outerHeight(true) but not getting the correct values.

Any suggestions on what might be going wrong? or an alternative way to setting the height of the content dynamically? I'm running out of hair to pull so any help is appreciated.

Edit: I am working with content in iframes. The following: winH = top.innerHeight is getting the height value of the top most iframe window.

I am trying to dynamically set the height of the webpage content by subtracting the header and footer values from the window size and setting the content to this value on document load.

Each of the functions parameters takes in an element id in order to grab the element height; excluding the content parameter.

 function setH(header, content, footer) 
{
    winH = top.innerHeight;
    winTitle = 32; // height value of the window title (part of the header)
    headH = $(header).outerHeight(true);
    footH = $(footer).outerHeight(true);
    contentH = winH - winTitle - headH - footH;
    $(content).css({'height' : (contentH) + 'px','overflow-y' : 'scroll'});
}

The issue that I am running into is the outerHeight values are returning the wrong values. The header returns 23px and footer 40px.

When examining the elements in FF and Chrome the values are 25px and 44px.

I have tried using innerHeight,, outerHeight and outerHeight(true) but not getting the correct values.

Any suggestions on what might be going wrong? or an alternative way to setting the height of the content dynamically? I'm running out of hair to pull so any help is appreciated.

Edit: I am working with content in iframes. The following: winH = top.innerHeight is getting the height value of the top most iframe window.

• javascript
• jquery
• html
• dynamic

• What is top? What does it hold? Please show your layout too. – Starx Commented Mar 18, 2013 at 15:10
• I have custom windows that pop up in iframes; top is grabbing the top most iframe height. – seen_my_dog Commented Mar 18, 2013 at 15:15

2 Answers 2

One thing to try which helped me is to put the code that checks outerHeight() in $(window).load() and not $(document).ready(). Obviously in many cases it's fine to use $(document.ready(), but sometimes the incorrect value of outerHeight() is caused from elements not being pletely loaded.

I've modified a script I use for calculating screenwidth/height. See if this works:

    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerWidth;
        viewportheight = window.innerHeight;
        winTitle = 32;
        headH = $(header).outerHeight(true);
        footH = $(footer).outerHeight(true);
        contentH = viewportheight - winTitle - headH - footH;
    }

    // IE6 in standards pliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewportwidth = document.documentElement.clientWidth;
        viewportheight = document.documentElement.clientHeight;
        winTitle = 32;
        headH = $(header).outerHeight(true);
        footH = $(footer).outerHeight(true);
        contentH = viewportheight - winTitle - headH - footH;
    }

    // older versions of IE

    else {

    viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
    viewportheight = document.getElementsByTagName('body')[0].clientHeight;
    }
    document.getElementById("content id").style.height = contentH + "px";