jQuery outerHeight non restituisce il valore corretto

Question

Sto provando a impostare dinamicamente l'altezza del contenuto della pagina Web sottraendo i valori dell'intestazione e del piè di pagina dalle dimensioni della finestra e impostando il contenuto su questo valore sul carico del documento.

Ciascuno dei parametri delle funzioni contiene un elemento id per afferrare l'altezza dell'elemento; escluso il parametro del contenuto.

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'}); 
} 

Il problema in cui mi sto imbattendo è che i valori outerHeight restituiscono valori errati. L'intestazione restituisce 23px e footer 40px.

Quando si esaminano gli elementi in FF e Chrome, i valori sono 25px e 44px.

Ho provato a usare innerHeight, outerHeight e outerHeight (true) ma non ottenendo i valori corretti.

Qualche suggerimento su cosa potrebbe andare storto? o un modo alternativo per impostare l'altezza del contenuto in modo dinamico? Sono a corto di capelli per tirare così ogni aiuto è apprezzato.

Modifica: Sto lavorando con il contenuto negli iframe. Il seguente: winH = top.innerHeight sta ottenendo il valore di altezza della finestra iframe più in alto.

Answer 1

Ho modificato uno script che utilizzo per il calcolo della larghezza dello schermo/altezza. Vedere se questo funziona:

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

Answer 2

Una cosa da provare che mi ha aiutato è quello di mettere il codice che controlla outerHeight() in $(window).load() e non $(document).ready(). Ovviamente in molti casi va bene usare $(document.ready(), ma a volte il valore errato di outerHeight() è causato da elementi non completamente caricati.