Cómo - Altura igual
Aprende a crear columnas de igual altura con CSS.
Cómo crear columnas de igual altura
Cuando tiene columnas que deben aparecer una al lado de la otra, a menudo querrá que tengan la misma altura (que coincidan con la altura de la más alta).
El problema:
El deseo:
Paso 1) Agregar HTML:
Ejemplo
<div class="col-container">
<div class="col">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
Paso 2) Agregar CSS:
Ejemplo
.col-container {
display: table; /* Make the
container element behave like a table */
width: 100%; /*
Set full-width to expand the whole page */
}
.col {
display: table-cell; /* Make elements inside the container behave like table
cells */
}
Altura igual sensible
Las columnas que hicimos en el ejemplo anterior responden (si cambia el tamaño de la ventana del navegador en el ejemplo de prueba, verá que se ajustan automáticamente al ancho y alto necesarios). Sin embargo, para pantallas pequeñas (como los teléfonos inteligentes), es posible que desee que se apilen verticalmente en lugar de horizontalmente:
En pantallas medianas y grandes:
Hola Mundo.
Hola Mundo.
Hola Mundo.
Hola Mundo.
Hola Mundo.
En pantallas pequeñas:
Hola Mundo.
Hola Mundo.
Hola Mundo.
Hola Mundo.
Hola Mundo.
Para lograr esto, agregue una consulta de medios y especifique un valor de píxel de punto de interrupción para cuando esto debería suceder:
Ejemplo
/* If the browser window is smaller than 600px, make the columns stack on top
of each other */
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}
Altura y ancho iguales usando Flexbox
También puede usar Flexbox para crear cajas de igual altura:
Ejemplo
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
Nota: Flexbox no es compatible con Internet Explorer 10 y versiones anteriores.
Sugerencia: lea más sobre las cajas flexibles en nuestro Tutorial de CSS Flexbox .