jQuery outerHeight is not returning the correct value

问题

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.

回答1:

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 completely loaded.

回答2:

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 compliant 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";

来源：https://stackoverflow.com/questions/15480108/jquery-outerheight-is-not-returning-the-correct-value

标签

javascript

jquery

html

dynamic