Tengo dos divs a la izquierda y a la derecha. El segundo div contiene muchos datos dinámicos, por lo que la altura no se puede corregir. Entonces, ¿cómo hacer que la altura del primer div sea la misma que la del segundo div?
<div style="width: 100%;"> <div class="first"> Left Div </div> <div class="second"> <h5> hello </h5> <h5> hello </h5> <h5> hello </h5> </div> </div> .first{ width: 50%; float: left; background: yellow; } .second{ margin-left: 50%; background: grey; } .d-flex { display: flex; } .first, .second { flex: 1 1 auto; } .first { background-color: yellow; } .second { background-color: grey; } <div class="d-flex"> <div class="first"> Left Div </div> <div class="second"> <h5> hello </h5> <h5> hello </h5> <h5> hello </h5> </div> </div>Solo necesita aplicar la propiedad flexible a sus divs
.first { flex: 1; background: yellow; } .second { flex: 1; background: grey; } <div style="width: 100%;display:flex;"> <div class="first">Left Div </div> <div class="second"> <h5> hello </h5> <h5> hello </h5> <h5> hello </h5> </div> </div>La forma difícil es usando JavaScript. Prueba algo como:
document.querySelector('.first').style.height = document.querySelector('.second').clientHeight + 'px';El problema con este código es que debe aplicarlo cada vez que la pantalla cambia de tamaño.
La segunda solución es usar "flex" en lugar de "float"
.first { width: 50%; background: yellow; } .second { width: 50%; background: grey; } .parent { display: flex; } <div class="parent" style="width: 100%;"> <div class="first"> Left Div </div> <div class="second"> <h5> hello </h5> <h5> hello </h5> <h5> hello </h5> </div> </div>O usando "flex" en lugar de ancho.