English 中文 العربية 日本語 Português

CSS: Largura, Altura e Overflow CSS

Última atualização: 2026-10-13

Propriedades nesta seção: width height min-width max-width min-height max-height overflow overflow-x overflow-y text-overflow object-fit

1. Largura e Altura

(1) Referência Rápida de Propriedades de Dimensão

Propriedade Valores Comuns Finalidade
width 300px, 50%, 50vw, auto Largura do conteúdo do elemento
height 200px, 50%, 50vh, auto Altura do conteúdo do elemento
min-width 320px, 50% Largura mínima (previne muito pequeno)
max-width 1200px, 80% Largura máxima (comum em responsivo)
min-height 200px, 100vh Altura mínima
max-height 400px Altura máxima (transborda se excedida)
overflow visible, hidden, scroll, auto Como lidar com conteúdo que transborda
overflow-x visible, hidden, scroll, auto Controle de overflow horizontal
overflow-y visible, hidden, scroll, auto Controle de overflow vertical

(2) width e height

width e height definem as dimensões da área de conteúdo do elemento:

▶ Exemplo

▶ Experimente

(3) Unidades Comuns

▶ Exemplo

▶ Experimente

(4) min-width / max-width

Limita a largura mínima/máxima do elemento, comumente usado em design responsivo:

▶ Exemplo

▶ Experimente

(5) min-height / max-height

▶ Exemplo

▶ Experimente

2. Função calc()

calc() é uma função CSS que permite cálculos matemáticos (adição, subtração, multiplicação, divisão) em valores de propriedade. Sua maior vantagem é misturar unidades diferentes.

📌 Regras do calc(): + e - devem ter espaços em ambos os lados (calc(100% - 20px) ✅, calc(100%-20px) ❌), * e / espaços são opcionais.

▶ Exemplo

▶ Experimente

(1) Casos de Uso Comuns

  1. Barra lateral + Conteúdo principal: .main { width: calc(100% - 300px); } adapta ao espaço restante
  2. Cards com espaçamento igual: .card { width: calc((100% - 40px) / 3); } três colunas com 20px de espaço
  3. Fonte responsiva: font-size: calc(14px + 0.5vw); tamanho base + incremento viewport
  4. Centralização precisa: left: calc(50% - 100px); offset conhecido alternativo ao transform

(2) Compatibilidade do calc()

calc() é suportado em IE11+, Chrome 26+, Firefox 16+, Safari 7+ e pode ser usado com segurança em projetos modernos. Apenas evite concatenação de strings no calc().

3. Controle de Overflow

💡 overflow-x e overflow-y: Ao definir overflow horizontal e vertical com valores diferentes, um pode ser forçado para auto. A melhor prática é usar a abreviação overflow.

Quando o conteúdo do elemento excede a largura/altura definida, ocorre "overflow". A propriedade overflow controla como o conteúdo que transborda é tratado.

(1) Valores de overflow

▶ Exemplo

▶ Experimente

(2) Controlando Cada Direção

▶ Exemplo

▶ Experimente

(3) Casos de Uso Comuns

1. Elipse de Texto

Combinado com text-overflow para truncamento de texto de linha única:

▶ Exemplo

▶ Experimente

2. Recorte de Imagem

Tamanho fixo do contêiner com overflow hidden para imagens:

▶ Exemplo

▶ Experimente

3. Contêiner de Rolagem

Cria uma área rolável de altura fixa:

▶ Exemplo

▶ Experimente

4. Limpar Floats

Definir overflow: hidden ou overflow: auto no pai limpa efeitos de float dos filhos:

▶ Exemplo

▶ Experimente

4. object-fit (Adaptação de Imagem/Vídeo)

object-fit controla como os elementos de substituição <img> ou <video> se adaptam ao tamanho do contêiner:

▶ Exemplo

▶ Experimente

5. Funções de Dimensão CSS

(1) calc()

calc() permite cálculos dinâmicos de dimensão no CSS, misturando unidades diferentes:

▶ Exemplo

▶ Experimente

Nota: Operadores devem ter espaços em ambos os lados, caso contrário não serão reconhecidos.

Propriedades nesta seção: width height min-width max-width min-height max-height overflow overflow-x overflow-y text-overflow object-fit

❓ Perguntas Frequentes

P Por que height: 100% não funciona?
R A altura percentual é relativa à altura do pai. Se a altura do pai é auto (determinada pelo conteúdo), o height: 100% do filho não pode ser calculado — porque o pai ainda não determinou sua própria altura. Para fazer alturas percentuais funcionarem, o pai precisa de um valor de altura explícito.
P Qual é a diferença entre max-width: 100% e width: 100%?
R width: 100% força o elemento a igualar a largura do pai, mesmo que o conteúdo seja pequeno. max-width: 100% significa "nunca exceder a largura do pai" — se o elemento é naturalmente menor, permanece menor. Usar max-width: 100% para imagens responsivas é melhor prática.
P overflow: hidden esconde todo o conteúdo que transborda?
R Sim. overflow: hidden corta todo o conteúdo excedendo as dimensões do elemento. Se você precisa rolar pelo conteúdo que transborda, use overflow: auto (barra de rolagem aparece quando necessário) ou overflow: scroll (sempre mostra barra de rolagem). overflow: hidden é também comumente usado para acionar BFC (Contexto de Formatação de Bloco) para resolver problemas de float.

📖 Resumo

📝 Exercícios

  1. Crie um "contêiner responsivo" — largura 80%, max-width 1200px, min-width 320px, centralizado horizontalmente.
  2. Crie um contêiner de imagem de tamanho fixo (300×200) com uma imagem maior, usando object-fit: cover para preencher sem distorção.
  3. Implemente efeitos de "elipse de texto de linha única" e "overflow de texto de múltiplas linhas" (dica: múltiplas linhas usa -webkit-line-clamp).
  4. Use calc() para implementar um layout "tela inteira menos altura da barra de navegação".
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%