jQuery height() no cambia el tamaño

Question

Nunca tuve este problema antes pero parece que no puedo encontrar la solución, así que espero que me puedan ayudar.

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

Básicamente lo que hace esta función es comprobar si el más alto div y establecer la altura de todos los divs seleccionados a esta altura. Esto funciona bien PERO es un diseño receptivo así que cuando el usuario cambia el tamaño de su navegador, el contenido se reduce y el div más alto. Así que agregué un evento de cambio de tamaño. El evento se está disparando pero no está cambiando la altura. ¿Alguna idea es por qué el cambio de tamaño no está cambiando la altura?

rápida jsFiddle para mostrar lo que sucede: http://jsfiddle.net/3mVkn/

FIX

Hmm esto era simplemente estúpido. Como estaba configurando la altura(), ya estaba arreglado, así que todo lo que tuve que hacer fue restablecer la altura y funcionó.

código Actualizado:

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

Esto no está relacionado con jQuery sino CSS. Es porque una vez que ha establecido el alto del contenido .block a algún valor, después de cambiar el tamaño de la ventana, las alturas de ese .block-content no cambiarán porque las alturas ya no se establecen en auto sino en algún valor predefinido.

La solución es usar return $(this)[0].scrollHeight en lugar de return $(this).height() De esta forma devolverá la altura real del contenido, no la altura definida por CSS.

EDIT:

La solución es en realidad para calcular la altura de todos los niños dentro de la .block-contenido y luego regresar a ese valor. He editado su código aquí http://jsfiddle.net/3mVkn/12/

Esto debería darle el resultado necesario.

Answer 2

creo que se echa en falta un parámetro de .map() función. Miré .map()here.