CSS: Definindo a Altura de um Div para Encher a Janela do Navegador
Resposta Rápida
Se você precisa que um div ocupe toda a altura da janela do navegador, em CSS você deve usar o valor 100vh, onde vh representa 100% da altura da área visível.
.full-height {
height: 100vh; /* Fazendo a altura do div igual à altura de um arranha-céu */
}Essa regra básica garante que o div ocupará toda a altura da tela e se ajustará de forma flexível a diferentes tamanhos de dispositivos.
Discussão sobre Porcentagens: Relação e Posicionamento
Em situações onde 100vh serve como uma diretriz geral, seu valor pode variar dependendo das alturas dos contêineres pai e do contexto de posicionamento. Para ancorar o layout de forma confiável, garantindo que o div ocupe o espaço pretendido, você deve definir os elementos html e body com altura igual a height: 100%:
html, body {
height: 100%; /* Fornecendo uma base sólida para nossos descendentes - os elementos div */
}Usar posicionamento absoluto com top: 0; e bottom: 0; faz com que o div se estique verticalmente, preenchendo todo o espaço disponível. No entanto, lembre-se de que elementos pais do div não devem ter posicionamento absoluto ou relativo, pois isso pode "bagunçar" o layout, causando "obstáculos" indesejados!
Vale a pena notar que 1vh é igual a 1% da altura da área visível e funciona como uma medida variável que se adapta de forma flexível. Essa adaptabilidade em um layout de várias colunas exigirá uma combinação de height: 100vh; e width: 50%; para criar colunas igualmente altas.
Visualização
Aqui está um exemplo visual simples de como um div ocupa 100% da altura da janela do navegador:
🖥️ Janela do Navegador
|
|----------------|
| |
| 🌐 |
| div { |
| height: 100vh; | <--- Observe como esse `div` se estica para cima!
| } | Ele se expande para preencher todo o espaço
| | vertical alocado.
|----------------|
|Imagine o div funcionando como um elevador: ele se move continuamente para cima ⬆️
Adicionando "Pó de Pixel": Separação Visual
Ao trabalhar com um grande número de elementos div, separação visual pode ser muito benéfica. Use a propriedade background-color para destacar visualmente aqueles divs que ocupam toda a sua altura em layouts complexos.
.full-height {
height: 100vh;
background-color: #e0e0e0; /* Vestindo o div com um "novo terno" */
}Na Era dos "Floats" e "Flexbox"
Técnicas específicas usando a propriedade float podem ajudar a alcançar um posicionamento estável. Mas o que fazer se o div estiver em um contexto de Flex ou Grid? Não se preocupe! Em um contêiner flexível, o elemento pai pode ter o valor display: flex;, enquanto o div filho terá a propriedade flex: 1;.
Essa propriedade fará com que o elemento filho se expanda e ocupe todo o espaço disponível no plano vertical.
O Caminho para a Responsividade e Compatibilidade com Navegadores
Embora nosso herói 100vh mantenha-se firme na maioria dos navegadores modernos, sempre é bom verificar a compatibilidade entre navegadores! Opera Mini e alguns navegadores móveis podem interpretar vh à sua maneira, então certifique-se de ter um plano de ação para esses navegadores peculiares.
Recursos Úteis
- Divertindo-se com Unidades de Viewport | CSS-Tricks — Uma exploração visual de como as unidades vh e vw funcionam em CSS.
- height - CSS: Folhas de Estilo em Cascata | MDN — Descrição oficial da propriedade
heightem CSS. - Altura, Largura e Máxima largura em CSS | W3Schools — Uso prático e tutoriais sobre dimensões em CSS.
- css - Chrome / Safari não preenchendo 100% da altura do pai flex | Stack Overflow — Profissionais discutem soluções para problemas de preenchimento de 100% de altura em Flexbox.
- Grid | Codrops — Um estudo aprofundado sobre CSS Grid.
- html - Fazer o body ter 100% da altura do navegador | Stack Overflow — Discussão e estratégias para alcançar 100% de altura para o elemento body.
- O truque para unidades de viewport em dispositivos móveis | CSS-Tricks — Informações sobre unidades de viewport em dispositivos móveis.