JQuery outerHeight does not return the correct value

Question

I am trying to dynamically set the height of the contents of a web page by subtracting the header and footer values ​​from the window size and setting the contents for this value when loading the document.

Each of the function parameters takes an element identifier to capture the height of the element; 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 problem I am facing is outerHeight values ​​returning incorrect values. The header returns 23px and the footer is 40px.

When checking items in FF and Chrome, the values ​​are 25px and 44px.

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

Any suggestions on what could go wrong? or an alternative way to dynamically determine the height of content? I'm running out of hair, so any help is appreciated.

Edit: I am working with content in an iframe. Next: winH = top.innerHeight gets the height value of the top top iframe.

Answer 1

One thing that helped me was to put code that checks outerHeight() in $(window).load() , not $(document).ready() . Obviously, in many cases it is ok to use $(document.ready() , but sometimes the incorrect outerHeight() value is caused by the elements not being fully loaded.

Answer 2

I changed the script that I use to calculate screen width / 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 (ie 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";