jQuery height() nie zmienia się przy zmianie rozmiaru

Question

Nigdy wcześniej nie miałem tego problemu, ale nie mogę znaleźć rozwiązania, więc mam nadzieję, że możecie mi pomóc.

jQuery

function setTheHeight() { 

    if($('#main.level1 .block.attention .block-content').length) { 
     //Get value of highest element 
     var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
      function() { 
       return $(this).height(); 
      } 
     )); 
     console.log(maxHeight); 
     $('#main.level1 .block.attention .block-content').height(maxHeight); 
    } 
} 

setTheHeight(); 

$(window).resize(function() { 
    setTheHeight(); 
}); 

Basicly co robi ta funkcja jest sprawdzić na najwyższym div i ustawić wysokość wszystkich wybranych div do tej wysokości. To działa dobrze. ALE jest to responsywna konstrukcja, więc gdy użytkownik zmienia rozmiar swojej przeglądarki, zawartość staje się mniejsza, a div wyższy. Więc dodałem zdarzenie zmiany rozmiaru. Wydarzenie jest wystrzeliwane, ale nie zmienia wysokości. Jakiś pomysł, dlaczego zmiana rozmiaru nie zmienia wysokości?

Szybkie jsFiddle pokazać, co się dzieje: http://jsfiddle.net/3mVkn/

FIX

Hmm to było po prostu głupie. Ponieważ ustawiałem wysokość(), było już ustalone, więc wystarczy tylko zresetować wysokość i zadziałało.

Zaktualizowany kod:

function setTheHeight() { 

    if($('#main.level1 .block.attention .block-content').length) { 

     //Reset height 
     $('#main.level1 .block.attention .block-content').height('auto'); 

     //Get value of highest element 
     var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
      function() { 
       return $(this).height(); 
      } 
     )); 
     console.log(maxHeight); 
     $('#main.level1 .block.attention .block-content').height(maxHeight); 
    } 
} 

setTheHeight(); 

$(window).resize(function() { 
    setTheHeight(); 
}); 

Answer 1

To nie jest powiązane z jQuery, ale CSS. Dzieje się tak, ponieważ po ustawieniu wysokości wartości .block na pewną wartość, po zmianie rozmiaru okna wysokości tych wartości blokowych nie ulegną zmianie, ponieważ wysokości nie są już ustawione na auto, ale na pewną predefiniowaną wartość.

Rozwiązaniem jest użycie return $(this)[0].scrollHeight zamiast return $(this).height() ten sposób zwróci prawdziwą wysokość treści, a nie CSS określonej wysokości.

EDIT:

Rozwiązaniem jest właściwie obliczyć wysokość wszystkich dzieci wewnątrz .block zawartości, a następnie powrót tej wartości. Zmodyfikowałem twój kod tutaj http://jsfiddle.net/3mVkn/12/

To powinno dać ci potrzebny wynik.

Answer 2

Chyba brakuje jednego parametru .map() funkcji. Spojrzałem na .map()here.