25.11.2024

CSS: Preenchendo a Altura da Tela Entre o Cabeçalho e o Rodapé

Resposta Rápida

Para garantir que o conteúdo ocupe toda a altura da tela, basta aplicar a propriedade height: 100vh;:

.main-content {
    height: 100vh;  /* É simples assim! 🎩✨ */
}

A unidade vh significa Viewport Height, onde 100vh é equivalente à altura total da área visível. No entanto, tenha cuidado: se o seu layout incluir um cabeçalho e um rodapé, você poderá enfrentar dificuldades. Continue lendo para descobrir como lidar com isso!

Layout com Cabeçalho e Rodapé

Se o seu layout inclui blocos de header e footer, uma abordagem diferente é necessária. Aqui estão duas soluções eficazes para ajustar corretamente o bloco de conteúdo principal:

Método Usando Flexbox

O CSS Flexbox será seu aliado aqui:

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header, footer {
    height: 40px; /* Adeus, rolagem! */
}

.main-content {
    flex-grow: 1; /* Deixe o div preencher o espaço! */
}

Dessa forma, distribuímos dinamicamente o espaço entre o cabeçalho e o rodapé.

Método Usando CSS Grid

O CSS Grid é outro método confiável:

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

header {
    grid-row: 1;
}

.main-content {
    grid-row: 2;  /* O lugar principal ao sol */
}

footer {
    grid-row: 3;
}

Aqui, o conteúdo principal é configurado para preencher o espaço, mantendo o rodapé fixo na parte inferior da tela.

Visualização

Imagine que você é um arquiteto construindo um arranha-céu (seu conteúdo) cujas dimensões devem combinar precisamente com a altura da estrutura (a tela do dispositivo):

🏢 (Conteúdo) 
📐 (Altura da Tela) 

CSS Flexbox será sua ferramenta confiável na construção, garantindo o alinhamento perfeito do conteúdo com a altura da tela. E isso será muito mais silencioso do que uma construção real. 🚧👷‍♂️

Amor pelos Rodapés e Conteúdo Dinâmico

Dominando o Rodapé

Para fixar o rodapé no lugar, o Flexbox ou a posição absoluta funcionarão muito bem.

.footer {
    margin-top: auto;  /* A rolagem não afeta aqui! */
}

Ou você pode usar a posição absoluta:

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;  /* Ocupa toda a largura! */
}

Gerenciando Conteúdo que Transborda

Seu conteúdo deve se comportar corretamente e não induzir rolagem devido a margens:

.main-content {
    padding-bottom: 40px; /* Conteúdo, considere o rodapé! */
}

Se o conteúdo transbordar, aplicar overflow: auto; ajudará a manter tudo sob controle:

.main-content {
    overflow-y: scroll;  /* Aqui você não pode entrar! */
}

Compatibilidade com Todos os Navegadores

Unidades de Viewport em Navegadores Antigos

Navegadores antigos podem não estar familiarizados com vh. Nesses casos, mantenha-se com a abordagem clássica:

html, body {
    height: 100%;  /* O bom e velho jeito */
}

.main-content {
    min-height: 100%;  /* Porque você merece mais */
}

Alternativas para Flexbox e Grid

Para navegadores que ainda aderem a padrões desatualizados e não suportam Flexbox ou Grid:

.container {
    display: table;  /* Hoje sou uma tabela */
    width: 100%;
    height: 100%;
}

.header, .footer {
    display: table-row;
    height: 1px; /* A importância dos detalhes */
}

.main-content {
    display: table-cell;  /* Velha escola, mas funciona */
    vertical-align: top;
}

Esses truques clássicos de CSS funcionam como feitiços mágicos para imitar o comportamento do Flexbox e do Grid.

Diálogo com Diferentes Dispositivos

Design Responsivo

Estilize seu bloco de conteúdo como um camaleão, capaz de se misturar a várias telas. Como? Use media queries e unidades relativas:

@media screen and (max-width: 768px) {
    .main-content {
        height: auto;  /* Quando o tamanho importa */
        padding-bottom: 60px; /* Dando espaço para o rodapé */
    }
}

Elementos de UI Inamistosos

Em dispositivos móveis, elementos de UI frequentemente ocupam parte do conteúdo. Para evitar isso, use calc():

.main-content {
    height: calc(100vh - 50px); /* Deixe 50 pixels para o cabeçalho e rodapé */
}

Recursos Úteis

1. Guia Completo para Flexbox | CSS-Tricks — um recurso inestimável para dominar e aplicar CSS Flexbox.
2. Conceitos Básicos de Flexbox - CSS: Cascading Style Sheets | MDN — documentação oficial da Mozilla revelando os fundamentos do Flexbox.
3. CSS Flexbox (Caixa Flexível) — recursos do W3Schools com exemplos claros de uso do Flexbox.
4. Guia Completo para CSS Grid | CSS-Tricks — um guia detalhado sobre as propriedades e conceitos do CSS Grid.
5. Layout CSS Grid - CSS: Cascading Style Sheets | MDN — um mergulho profundo no layout CSS Grid da Mozilla com exemplos e recomendações.
6. Rodapé Fixo em Cinco Maneiras | CSS-Tricks — vários métodos para criar um rodapé fixo em CSS.
7. Construindo um layout pronto para produção usando CSS Grid hoje — Smashing Magazine — um guia avançado para criar layouts escaláveis e resistentes a mudanças usando o CSS Grid.

Video

Navigation