Estoy tratando de hacer que todos mis divs tengan la misma altura, incluso si se cambia el tamaño del navegador. Tengo 4 cajas de iconos. cada cuadro tiene un icono, un título y una descripción. Quiero hacerlos todos del mismo tamaño. eso significa que si la altura más alta del div del contenedor de iconos es 100 px, todos los div del contenedor de iconos serán 100 px. el siguiente código funciona, pero si cambio el tamaño del navegador en algún momento, la altura de los divs del contenedor es mucho mayor que la altura real . ¿que estoy haciendo mal? (Tenga en cuenta que el cambio de tamaño solo ocurrirá en un tamaño de pantalla superior a 767 px) gracias
function allSameHeight(sameSec, sameImg, sameTitle, sameDesc) { jQuery(sameSec).each(function () { let highestImg = 0; let highestTitle = 0; let highestTxt = 0; jQuery(sameSec).find(sameImg).each(function () { if (jQuery(this).height() > highestImg) { highestImg = jQuery(this).height(); } }); jQuery(sameSec).find(sameTitle).each(function () { if (jQuery(this).height() > highestTitle) { highestTitle = jQuery(this).height(); } }); jQuery(sameSec).find(sameDesc).each(function () { if (jQuery(this).height() > highestTxt) { highestTxt = jQuery(this).height(); } }); if (jQuery(window).width() > 768) { jQuery(sameSec).find(sameImg).css("min-height", highestImg); jQuery(sameSec).find(sameTitle).css("min-height", highestTitle); jQuery(sameSec).find(sameDesc).css("min-height", highestTxt); } else { jQuery(sameSec).find(sameImg).css("min-height", "auto"); jQuery(sameSec).find(sameTitle).css("min-height", "auto"); jQuery(sameSec).find(sameDesc).css("min-height", "auto"); } }); }Dar una clase a los cuatro elementos. He usado myItem por ejemplo.
const setHeights = () => { let highestHeight = 0; //Loop through all elements and get the highest height $('.myItem').each((index, element) => { if($(element).outerHeight() > highestHeight) { highestHeight = $(element).outerHeight(); } }); //Set the height of all elements to highest $('.myItem').height(highestHeight); }; $(window).resize(() => { //Run each time window is resized setHeights(); }); .myItem { width: 25%; color: white; float: right; } .one { background: red; } .two { background: blue; } .three { background: purple; } .four { background: orange; } h3 { word-wrap: break-word; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button onclick="setHeights()">Make them equal</button> </div> <div class="myItem one"> <h3> aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaa </h3> </div> <div class="myItem two"> <h3> bbbbbbbb </h3> </div> <div class="myItem three"> <h3> ccccccccccccccc ccccccccc </h3> </div> <div class="myItem four"> <h3> ddddddddddddddd ddddddddddd ddddddddddddd ddddddddddddddd ddddddddddddddddd </h3> </div>Para este caso existen múltiples enfoques, mencionaré los dos más comunes (en mi opinión):