Como fazer uma div preencher a altura restante da tela, distribuindo o espaço automaticamente

Como fazer uma div preencher a altura restante da tela, distribuindo o espaço automaticamente

Assim como o alinhamento vertical, preencher a altura restante de um elemento sempre foi uma grande dificuldade, nos forçando a utilizar até mesmo javascript para realizar os cálculos. A chegada do módulo Flexbox no CSS trouxe muitas técnicas de alinhamento, distribuição de elementos e preenchimento de áreas, tornando a vida do desenvolvedor front-end muito mais fácil!

No exemplo abaixo vou ensinar como distribuir 3 elementos verticalmente (cada um com um comportamento diferente), preenchendo a altura total da tela.

html,
body {
    height: 100vh;
    margin: 0
}

.box {
    display: flex;
    flex-flow: column;
    height: 100vh;
}

.box .header {
    flex-grow: 0;
    flex-basis: auto;
    background-color: hotpink;
}

.box .content {
    flex-grow: 1;
    flex-basis: auto;
    background-color: gold;
}

.box .footer {
    flex-grow: 0;
    flex-basis: 100px;
    background-color: indianred;
}
<div class="box">
    <div class="header">
        <p>header</p>
    </div>
    <div class="content">
        <p>content</p>
    </div>
    <div class="footer">
        <p>footer</p>
    </div>
</div>

No exemplo acima criamos a div box com display: flex e usamos o flex-flow: column para informar que o comportamento dela será de uma coluna, posicionando os elementos internos um abaixo do outro (na vertical). Tanto essa div quando o body ficaram com height: 100vh para preencher a altura total da tela.

Com flex-grow: 0, informamos que a altura do nosso header não irá crescer para preencher um determinado espaço e com flex-basis: auto informamos que a altura será automática, variando de acordo com o conteúdo interno.

O footer será praticamente igual ao header, com a diferença de já começar com uma altura de 100px.

Por fim, no content iremos setar flex-grow: 1. Como a soma do flex-grow dos 3 elementos é 1, a div content irá tentar ocupar 100% da altura da tela, só que respeitando o espaço já alocado pelas outras 2 divs. Desta forma a div do centro irá preencher toda a área restante da tela.

Referências