Cómo crear: columnas de altura igual

Aprenda a crear columnas de altura igual utilizando CSS.

Cómo crear columnas de altura igual

Cuando sus columnas deben mostrarse en paralelo, generalmente desea que tengan la misma altura (alinearse con la altura más alta).

Pruebe personalmente

Primer paso - Añadir HTML:

<div class="col-container">
  <div class="col">
    <h2>Columna 1</h2>
    <p>Hola Mundo</p>
  </div>
  <div class="col">
    <h2>Columna 2</h2>
    <p>Hola Mundo!</p>
    <p>Hola Mundo!</p>
    <p>Hola Mundo!</p>
    <p>Hola Mundo!</p>
  </div>
  <div class="col">
    <h2>Columna 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

Segundo paso - Añadir CSS:

.col-container {
  display: table; /* Hace que los elementos del contenedor se comporten como una tabla */
  width: 100%; /* Establecido en ancho completo para expandir toda la página */
}
.col {
  display: table-cell; /* Hace que los elementos dentro del contenedor se comporten como celdas de tabla */
}

Pruebe personalmente

Alturas iguales adaptables

Las columnas que creamos en el ejemplo anterior son adaptables (si ajusta el tamaño de la ventana del navegador en el ejemplo que intenta, verá que se ajustan automáticamente al ancho y altura necesarios). Sin embargo, para las pantallas pequeñas (como los smartphones), es posible que desee que se apilen verticalmente en lugar de mostrarse horizontalmente:

Para lograr esto, agregue una consulta de medios y especifique un valor de píxeles de punto de quiebre:

Ejemplo

/* Si la ventana del navegador es menor de 600px, hacer que las columnas se apilen */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Pruebe personalmente

Implementar alturas y anchos iguales con Flexbox

También puede usar Flexbox para crear cuadros de altura igual:

Ejemplo

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

Pruebe personalmente

Atención:No se admite Flexbox en versiones de Internet Explorer 10 y anteriores.

Páginas relacionadas

Tutoriales:CSS Flexbox