Como Fazer um Div Sempre em Tela Cheia: CSS e JavaScript
Resposta Rápida
Para garantir que o bloco <div> se estenda para preencher todo o espaço disponível da tela, use unidades de viewport no CSS. Defina a largura como 100vw e a altura como 100vh:
.fullscreen-div {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}Atribua essa classe ao elemento <div> no seu código HTML:
<div class="fullscreen-div"></div>Agora o <div> cobrirá todo o espaço da tela, como uma tela cobrindo uma embarcação.
Configurando a Base
Primeiro, vamos redefinir as margens padrão para as tags <html> e <body>. Defina margin e padding como 0.
html, body {
height: 100%;
margin: 0;
padding: 0;
}Gerenciando Conteúdo Extenso
Se o seu <div> contiver muito conteúdo e começar a transbordar, use a propriedade overflow: auto; para permitir uma barra de rolagem quando necessário.
.fullscreen-div {
overflow: auto;
}Bons e Velhos Navegadores
Para navegadores mais antigos que não suportam unidades de viewport, é aconselhável usar min-height: 100% para o <div> de contêiner, garantindo sua exibição em tela cheia.
#wrapper {
min-height: 100%;
}Estilização e Transparência
Adicione uma cor de fundo marcante com um pouco de transparência para destacar visualmente o <div> em tela cheia.
.fullscreen-div {
background-color: rgba(0, 0, 0, 0.5);
}Posicionamento Fixo
Se você precisar que o <div> permaneça no lugar e visível enquanto rola, use position: fixed;.
.fullscreen-div {
position: fixed;
}Eficiência
Evite complexidade desnecessária e código excessivo em CSS e JavaScript – nosso objetivo é buscar um código eficiente e otimizado.
Responsividade em Dispositivos
O elemento deve ser exibido corretamente em qualquer dispositivo, seja um celular ou um computador.
Consultas de Mídia
Usar consultas de mídia permitirá adaptar os estilos para vários dispositivos, garantindo que ele preencha a tela em cada um deles.
@media (max-width: 600px) {
.fullscreen-div {
/* Estilos para dispositivos móveis */
}
}Compatibilidade de Unidades
Use as unidades vh/vw em conjunto com porcentagens para compatibilidade entre navegadores.
.fullscreen-div {
width: 100%; /* Para navegadores mais antigos */
width: 100vw; /* Para navegadores modernos */
height: 100%;
height: 100vh;
}Prevenindo Mudanças de Conteúdo
Aplique box-sizing: border-box; para ajudar a evitar problemas potenciais com cálculos de tamanho de elementos.
.fullscreen-div {
box-sizing: border-box;
}Visualização
Imagine cada <div> como uma semente que espalha ideias pela tela, como cevada em campos preparados.
Nós transformamos um <div> comum em um de tela cheia:
div {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}O <div> em tela cheia será abrangente e estacionário, criando um espaço visual contínuo na página.
Mais Dicas e Truques
Barras de Rolagem
Para se livrar das barras de rolagem, defina overflow: hidden; para o <body>.
body {
overflow: hidden;
}Gerenciamento de Camadas com z-index
Use z-index para controlar a ordem de empilhamento dos elementos na página.
.fullscreen-div {
z-index: 1000;
}Demonstração Ao Vivo
Mostre sua solução em ação usando JSFiddle ou CodePen.
Interatividade
Lembre-se, é importante considerar a interação do usuário com o layout, especialmente ao usar elementos fixos.
Recursos Úteis
- Rodapé Fixo | CSS-Tricks - um guia detalhado sobre como criar um
<div>de altura total. - Guia Completo do Flexbox | CSS-Tricks - um cenário para alinhar elementos em layouts de tela cheia.
- Guia Completo do CSS Grid | CSS-Tricks - construção prática de layouts com CSS Grid.
- API de Tela Cheia - o básico sobre como trabalhar com a API de Tela Cheia em JavaScript.
- Imagem de Fundo Perfeita em Tela Cheia | CSS-Tricks - dicas para criar imagens de fundo em tela cheia.
- Fontes Responsivas e Fluídas com vh e vw | Smashing Magazine - aplicando responsividade e fluidez a fontes usando unidades
vh/vw.