Layout com rodapé e barra lateral fixos

Um rodapé fixo permanece na parte inferior da área de visualização quando o conteúdo é curto, mas é empurrado para baixo quando o conteúdo é longo. O desafio histórico era fazer o rodapé permanecer na posição correta sem conhecer a altura do conteúdo nem usar JavaScript.

A solução moderna mais simples é: body { display: flex; flex-direction: column; min-height: 100vh; } e main { flex: 1; }. O conteúdo principal cresce para preencher o espaço disponível, empurrando o rodapé para a parte inferior independentemente do comprimento do conteúdo.

Alternativa com grade do CSS: body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. O cabeçalho recebe altura automática, o conteúdo principal recebe 1fr (preenche o espaço restante) e o rodapé recebe altura automática. É uma solução limpa e explícita: o modelo de linhas mostra claramente a intenção da disposição.

position: sticky; bottom: 0 no rodapé faz com que ele permaneça na parte inferior da área de visualização durante a rolagem, mas somente quando o contexto de rolagem permitir. Funciona para rodapés dentro de um contêiner com rolagem, mas é menos apropriado para rodapés fixos no nível da página, nos quais Flexbox ou uma grade são soluções mais limpas.

Uma disposição com barra lateral e conteúdo principal: wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }. O min-width: 0 no conteúdo principal impede que os itens flexíveis ultrapassem os limites do contêiner quando contêm conteúdo largo.

Barra lateral em grade: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. A coluna da barra lateral tem largura fixa; a coluna de conteúdo preenche o espaço restante. Adicione uma linha de cabeçalho: grid-template-rows: auto 1fr, fazendo a barra lateral ocupar as duas linhas.

Em dispositivos móveis, recolha a barra lateral acima ou abaixo do conteúdo principal: use uma consulta de mídia para mudar de uma disposição em colunas para uma pilha de coluna única. Outra opção é usar grid-template-columns: min(280px, 30%) 1fr para obter uma barra lateral fluida que diminua em áreas de visualização menores.

Faça a barra lateral rolar de forma independente: sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. A barra lateral permanece visível enquanto o conteúdo principal rola, o que é ideal para barras laterais de navegação ou de sumário em páginas de conteúdo longo.

Uma barra lateral recolhível alterna entre um estado com largura total e outro somente com ícones. Use uma propriedade personalizada do CSS para a largura da barra lateral: --sidebar-width: 280px no contêiner e alterne para 64px por meio de uma classe. As transições animam suavemente a mudança de largura.

Uma barra lateral com posicionamento fixo (position: fixed; left: 0; top: 0; height: 100vh) exige deslocar o conteúdo principal pela largura da barra lateral: main { margin-left: 280px }. Em dispositivos móveis, a barra lateral desliza sobre o conteúdo, com um botão de fechar e uma sobreposição de fundo.

Marque as barras laterais de navegação com <nav> e aria-label="Sidebar navigation". Barras laterais recolhíveis precisam de um botão de alternância acessível com aria-expanded e aria-controls. Links de salto ajudam usuários de teclado a ignorar as barras laterais e chegar ao conteúdo principal.

Por que é necessário definir min-width: 0 no item flexível do conteúdo principal em uma disposição com barra lateral?

Flexbox com flex: 1 no conteúdo principal ou uma grade de três linhas cria rodapés fixos organizados com pouco CSS. As disposições com barra lateral usam definições de colunas fixas ou fluidas, com pontos de interrupção responsivos para recolhê-las em dispositivos móveis. Barras laterais fixas, larguras recolhíveis e atributos ARIA acessíveis completam padrões prontos para produção de barras laterais e rodapés.