jQuery calcola erroneamente l'altezza div sul documento pronto

Question

Sto provando a cambiare l'altezza della sezione dopo il caricamento della pagina ma non sempre funziona. So che il mio codice per cambiare l'altezza va bene, e funziona sul ridimensionamento delle finestre, solo la chiamata iniziale dopo document.ready non sempre funziona.

var $window = $(window); 

function wrap_element_link_mobile(object, path) { 
    if ($(this).width() < 921 && !object.parent().is('a')) { 
     object.wrap("<a href='" + path + "'></a>"); 
    } else if ($(this).width() > 920 && object.parent().is('a')) { 
     object.unwrap(); 
    } 
} 

function resize_section() { 
    var sectionMinHeight = $(window).height() - $('header').height() - $('footer').height() - 7; 
    $('section').css('min-height', sectionMinHeight); 
} 

/* Called after document Load 
================================ */ 

$(document).ready(function() { 
    var $mainLogo = $('#main-logo'); 

    wrap_element_link_mobile($mainLogo, '/'); 
    resize_section(); 

    $window.resize(function() { 
     wrap_element_link_mobile($mainLogo, '/'); 
     resize_section(); 
    }); 
}); 

Dopo aver creato un console.log nella chiamata iniziale ho capito che è sempre chiamato, ma per qualche motivo non funziona.

* schermata di modifica di quello che vedo

Avviso la barra di scorrimento, che va via se ridimensiona la finestra a tutti e anche se è l'altezza corretta.

http://jsfiddle.net/QHSm3/6/

Answer 1

Il problema è con il logo albero !! ! Ecco cosa succede:

Non è stata specificata la larghezza e l'altezza dell'immagine. Quando lo fai, il browser assume un'altezza di 0px su document.ready . Su document.ready, lo script calcola l'altezza dell'intestazione in 60px e imposta subito un'altezza minima sulla sezione.

Quando l'immagine viene caricata, l'altezza dell'intestazione diventa 101px; a questo punto, il contenuto (intestazione, sezione, piè di pagina) aumenta di 41 px, quindi la barra di scorrimento.

I risultati potrebbero essere diversi se l'immagine viene caricata dalla cache.

Si hanno due tre opzioni:

1: specificare le dimensioni dell'immagine in HTML:

<img alt="Tree Logo" id="main-logo" src="logo.png" width="83" height="101"/> 

Demo here, sembra funzionare.

2: calcolare altezze su window.load anziché su document.ready.

3. Meglio, utilizzare un CSS sticky footer (a meno che non abbia frainteso ciò che si sta tentando di fare).

Answer 2

questo sarebbe il mio puro tentativo html/css.

http://jsfiddle.net/QHSm3/10/

section.pages { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    top: 102px; 
    right: 0; 
    overflow: auto; 
} 

So che non risponde direttamente alla tua domanda, ma credo StackOverflow dovrebbe mostrare la strada giusta, e personalmente, penso che se c'è un modo di risolvere un problema di layout con CSS puro , dovrebbe essere fatto in questo modo.

EDIT: Ecco un altro tentativo, si tratta di calc:

http://jsfiddle.net/QHSm3/11/

section.pages { 
    position: absolute; 
    left: 0; 
    top: 102px; 
    right: 0; 
    min-height: calc(100% - 123px); 
} 

prega di notare che questo vi permetterà di IE8 dietro: http://caniuse.com/#search=calc