22.11.2024

CSS: Como Fazer uma Div Filha Herdar a Altura do Pai

Resposta Rápida

Para permitir que um elemento aninhado herde o min-height do seu pai, aplique display: flex; ao pai e flex: 1; ao filho. Assim, o elemento filho preencherá completamente a altura do pai, mesmo que sua altura não esteja definida explicitamente.

.pai {
  display: flex; /* A era da flexibilidade */
  min-height: 100vh; /* Altura mínima não menor que o tamanho da viewport */
}

.filho {
  flex: 1; /* Abra suas asas, jovem */
}

<div class="pai">
  <div class="filho">
    Conteúdo
  </div>
</div>

Essa solução ativa todas as vantagens do flexbox, proporcionando flexibilidade na gestão de altura.

Métodos Alternativos para Herdar o min-height

Vamos explorar outros métodos que permitem que um elemento filho herde o min-height de seu pai.

Posicionamento Para o Resgate

Para permitir que o pai passe sua altura total para o filho, você pode aplicar position: relative; ao contêiner e position: absolute; ao elemento aninhado.

.pai {
  position: relative; /* Torna-se o ponto de referência para o filho */
  min-height: 100vh; /* Altura não menor que o tamanho da viewport */
}

.filho {
  position: absolute; /* Ocupa o espaço do pai como relativo */
  top: 0;
  left: 0;
  width: 100%; /* Ocupa toda a largura do pai */
  height: 100%; /* E toda a altura */
}

Respeitando as Tradições do Layout de Tabela

Para navegadores mais antigos com suporte limitado para flexbox, você pode emular um layout de tabela usando display: table; e display: table-cell; para o pai e para o filho, respectivamente.

.pai {
  display: table;
  min-height: 100vh;
  width: 100%;
}

.filho {
  display: table-cell; /* Comporta-se como uma célula de tabela */
}

A Magnífica Grade

Usando CSS Grid, você pode definir o pai como um contêiner de grade, enquanto o filho preenche o espaço disponível.

.pai {
  display: grid; /* O caminho para um layout flexível */
  min-height: 100vh;
}

.filho {
  align-self: stretch; /* Estica para a altura total disponível */
}

Nuâncias de Uso

Os elementos filhos não herdám min-height diretamente devido a limitações no CSS (link para o relatório do problema no WebKit). Os métodos discutidos são soluções eficazes para essa situação.

Visualização

Container (📦): min-height definido para 100%

Filho (🌱): busca crescer para cima

    🌱
   /|\\   < - Buscando crescer para cima
  / | \\
 /  |  \\
📦  📦  📦  < - Mas sem uma altura definida explicitamente, isso é desafiador

A ilustração mostra as tentativas do filho de esticar para herdar a altura, mas sem uma altura definida para o contêiner pai, é difícil de alcançar.

Peculiaridades e Exceções e Seus Tratamentos

Aqui está como lidar com peculiaridades típicas e utilizar conhecimento prático em CSS:

Certifique-se de que o Pai Tem uma Altura Explícita

Adicionar height: 1px; ao elemento pai permite que seus filhos herdem ou computem seus tamanhos.

Evite Conflitos de Propriedades

Usar tanto height quanto min-height pode ser confuso, pois os navegadores podem não considerar a prioridade de uma propriedade sobre a outra.

Verifique a Compatibilidade do Navegador

Não se esqueça de verificar o suporte para as propriedades CSS Grid e Flexbox em caniuse.com.

Depuração Visual

Use cores de fundo ou bordas para verificar o posicionamento e os tamanhos dos elementos durante o desenvolvimento.

Explore Propriedades de Display

Quando modelos de bloco tradicionais não funcionam, métodos como display: table e posicionamento absoluto podem ser úteis.

Flexbox e Grid são soluções modernas que ajudam a resolver problemas de herança de altura. Você pode aprender mais sobre eles em nossos Materiais Úteis.

Materiais Úteis

1. Guia Completo do Flexbox | CSS-Tricks
2. CSS - Elemento Aninhado com min-height: 100% não herdando altura - Stack Overflow
3. Medições em CSS: altura, largura e suas limitações - W3Schools
4. min-height - MDN Web Docs
5. Modelo de Formatação Visual do CSS - Detalhes - W3.org
6. Fundamentos do Posicionamento no CSS – A List Apart
7. Propriedade Display - Referência CSS Codrops

Video

Navigation