Como fazer - Altura igual
Aprenda a criar colunas de altura igual com CSS.
Como criar colunas de altura igual
Quando você tem colunas que devem aparecer lado a lado, geralmente deseja que elas tenham a mesma altura (correspondendo à altura da mais alta).
O problema:
O desejo:
Etapa 1) Adicionar HTML:
Exemplo
<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>
Etapa 2) Adicionar CSS:
Exemplo
.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 responsiva
As colunas que fizemos no exemplo anterior são responsivas (se você redimensionar a janela do navegador no exemplo experimente, verá que elas se ajustam automaticamente à largura e altura necessárias). No entanto, para telas pequenas (como smartphones), você pode querer empilhá-las verticalmente em vez de horizontalmente:
Em telas médias e grandes:
Olá Mundo.
Olá Mundo.
Olá Mundo.
Olá Mundo.
Olá Mundo.
Em telas pequenas:
Olá Mundo.
Olá Mundo.
Olá Mundo.
Olá Mundo.
Olá Mundo.
Para conseguir isso, adicione uma consulta de mídia e especifique um valor de pixel de ponto de interrupção para quando isso deve acontecer:
Exemplo
/* 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%;
}
}
Igualdade de Altura e Largura usando Flexbox
Você também pode usar o Flexbox para criar caixas de altura igual:
Exemplo
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
Observação: o Flexbox não é compatível com o Internet Explorer 10 e versões anteriores.
Dica: Leia mais sobre caixas flexíveis em nosso Tutorial CSS Flexbox .