jQuery outerHeight nie zwraca poprawnej wartości

Question

Próbuję dynamicznie ustawić wysokość zawartości strony internetowej, odejmując wartości nagłówka i stopki od rozmiaru okna i ustawiając zawartość na tę wartość podczas ładowania dokumentu.

Każdy z parametrów funkcji przyjmuje identyfikator elementu, aby pobrać wysokość elementu; z wyłączeniem parametru treści.

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

Problem, na który napotykam, to wartości ExternalHeight zwracające nieprawidłowe wartości. Nagłówek zwraca 23 piksele, a stopka 40 pikseli.

Podczas badania elementów w FF i Chrome wartości wynoszą 25px i 44px.

Próbowałem używać innerHeight ,, outerHeight i outerHeight (true), ale nie uzyskiwanie prawidłowych wartości.

Jakieś sugestie co może się nie udać? lub alternatywny sposób dynamicznego ustawiania wysokości treści? Skończyły mi się włosy, żeby wyciągnąć każdą pomoc.

Edytuj: Pracuję z zawartością w elementach iframe. Następujące: winH = top.innerHeight uzyskuje wartość wysokości najwyższego okna najbardziej iframe.

Answer 1

Zmodyfikowałem skrypt, którego używam do obliczania szerokości/szerokości ekranu. Sprawdzić, czy to działa:

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

Jedną rzeczą, aby spróbować co pomogło mi to umieścić kod, który sprawdza outerHeight() w $(window).load() i nie $(document).ready(). Oczywiście w wielu przypadkach dobrze jest używać $(document.ready(), ale czasami niepoprawna wartość outerHeight() jest spowodowana tym, że elementy nie są całkowicie załadowane.