Largura, Altura e Overflow CSS

Largura e Altura

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

width e height

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

Exemplo

HTML

<style>
.box {
  width: 300px;
  height: 200px;
  background: #f0f0f0;
}
</style>
<div class="box">Elemento caixa mostrando intervalo de dimensão</div>

▶ Experimente

Unidades Comuns

Exemplo

HTML

<style>
.pixel {
  width: 300px;
  background: #e3f2fd;
}
.percent {
  width: 50%;
  background: #fce4ec;
}
.vw-vh {
  width: 50vw;
  height: 100vh;
  background: #e8f5e9;
}
.auto-width {
  width: auto;
  background: #fff3e0;
}
</style>
<div class="pixel">Unidade pixel: largura fixa 300px</div>
<div class="percent">Unidade percentual: largura 50%</div>
<div class="vw-vh">Unidade viewport: largura 50vw</div>
<div class="auto-width">Largura automática: determinada pelo conteúdo</div>

▶ Experimente

min-width / max-width

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

Exemplo

HTML

<style>
.container {
  width: 80%;
  max-width: 1200px;
  min-width: 320px;
  margin: 0 auto;
  background: #e8eaf6;
  padding: 10px;
}
</style>
<div class="container">Contêiner com restrições de largura responsivas</div>

▶ Experimente

min-height / max-height

Exemplo

HTML

<style>
.card {
  min-height: 200px;
  max-height: 400px;
  background: #fff3e0;
  border: 1px solid #ccc;
}
</style>
<div class="card">Componente card com altura mínima/máxima. Conteúdo excedendo a altura máxima transbordará e requererá a propriedade overflow para tratar.</div>

▶ Experimente

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

HTML

<style>
.layout {
  width: calc(100% - 300px);
  background: #e3f2fd;
  padding: 16px;
}

.sidebar {
  width: 300px;
  float: left;
  background: #fce4ec;
  padding: 16px;
  box-sizing: border-box;
}
</style>
<div class="layout">Conteúdo principal: largura = 100% - 300px</div>

▶ Experimente

Casos de Uso Comuns

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

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().

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.

Valores de overflow

Exemplo

HTML

<style>
.visible {
  overflow: visible;
  background: #fce4ec;
  height: 50px;
}
.hidden {
  overflow: hidden;
  background: #e8f5e9;
  height: 50px;
}
.scroll {
  overflow: scroll;
  background: #fff3e0;
  height: 50px;
}
.auto {
  overflow: auto;
  background: #e3f2fd;
  height: 50px;
}
</style>
<div class="visible">Área visível (overflow mostra fora da caixa)</div>
<div class="hidden">Conteúdo cortado ao exceder (overflow hidden)</div>
<div class="scroll">Barra de rolagem sempre visível mesmo que o conteúdo caiba</div>
<div class="auto">Barra de rolagem aparece apenas quando o conteúdo transborda</div>

▶ Experimente

Controlando Cada Direção

Exemplo

HTML

<style>
.box {
  overflow-x: hidden;
  overflow-y: auto;
  width: 200px;
  height: 80px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}
</style>
<div class="box">Elemento caixa com overflow horizontal hidden e auto-scroll vertical para visualizar todo o conteúdo</div>

▶ Experimente

Casos de Uso Comuns

1. Elipse de Texto

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

Exemplo

HTML

<style>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  border: 1px solid #ccc;
  padding: 8px;
  background: #f9f9f9;
}
</style>
<div class="ellipsis">Este é um texto longo que será truncado com elipse ao exceder a largura do contêiner</div>

▶ Experimente

2. Recorte de Imagem

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

Exemplo

HTML

<style>
.avatar {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  background: #e0e0e0;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
<div class="avatar">Contêiner de avatar (recorte circular)</div>

▶ Experimente

3. Contêiner de Rolagem

Cria uma área rolável de altura fixa:

Exemplo

HTML

<style>
.scroll-box {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
  background: #fafafa;
}
</style>
<div class="scroll-box">
  <p>Linha 1: Contêiner de rolagem pode exibir grande conteúdo</p>
  <p>Linha 2: Barra de rolagem aparece quando o conteúdo excede a altura</p>
  <p>Linha 3: Role para ver conteúdo oculto</p>
  <p>Linha 4: Implementado com overflow-y: auto</p>
  <p>Linha 5: Mais conteúdo significa mais rolagem</p>
  <p>Linha 6: Adequado para seções de comentários, anúncios, etc.</p>
</div>

▶ Experimente

4. Limpar Floats

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

Exemplo

HTML

<style>
.clearfix {
  overflow: hidden;
  background: #e8eaf6;
  padding: 10px;
}
</style>
<div class="clearfix">Contêiner de limpeza de float (overflow: hidden aciona BFC)</div>

▶ Experimente

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

HTML

<style>
.image-container {
  width: 300px;
  height: 200px;
  background: #f5f5f5;
  border: 2px dashed #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
<div class="image-container">Contêiner de imagem (substitua pela imagem real)</div>

▶ Experimente

cover: Mantém proporção, preenche contêiner, recorta excesso (mais comum)
contain: Mantém proporção, mostra imagem completa, pode deixar espaço em branco
fill: Estica para preencher sem manter proporção (pode distorcer)
none: Mantém tamanho original
scale-down: Pega o menor entre none e contain

Funções de Dimensão CSS

calc()

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

Exemplo

HTML

<style>
.calc-demo {
  width: calc(100% - 40px);
  height: calc(50vh - 60px);
  background: #e3f2fd;
  border: 1px solid #90caf9;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<div class="calc-demo">Largura subtrai automaticamente 40px, altura é metade do viewport menos 60px</div>

▶ Experimente

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

❓ Perguntas Frequentes

Q 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.

Q 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.

Q 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

Controlar dimensões de elementos e comportamento de overflow é fundamental para o layout
width/height definem dimensões, min-width/max-width restringem intervalo, overflow lida com conteúdo que transborda
object-fit: cover é uma ferramenta poderosa para tratamento de imagens, enquanto calc() fornece cálculo dinâmico flexível
Dominar essas propriedades dá melhor controle sobre o comportamento de elementos em todas as situações

📝 Exercícios

Crie um "contêiner responsivo" — largura 80%, max-width 1200px, min-width 320px, centralizado horizontalmente.
Crie um contêiner de imagem de tamanho fixo (300×200) com uma imagem maior, usando object-fit: cover para preencher sem distorção.
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).
Use calc() para implementar um layout "tela inteira menos altura da barra de navegação".