31 de Mar de 2021 • 1 min read
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.
.box .footer {
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.