Propriedade CSS min-height

A propriedade min-height define a altura mínima de um elemento. O elemento pode crescer além desse valor quando seu conteúdo precisar de mais espaço, mas nunca poderá tornar-se menor do que ele. Na prática, min-height estabelece um limite inferior para a altura da caixa.

Isso é útil sempre que você quiser garantir uma quantidade mínima de espaço vertical, mesmo quando há pouco ou nenhum conteúdo — por exemplo, um banner hero, um cartão ou um rodapé que deve sempre parecer substancial independentemente de quanto texto contenha.

Como min-height interage com height e max-height

As três propriedades de altura são resolvidas em conjunto pelo navegador, de acordo com as regras de dimensionamento:

Se o valor calculado de height for menor que min-height, o elemento é forçado a ter a altura de min-height (o mínimo prevalece).
Se o valor calculado de height for maior que min-height, min-height não tem efeito.
min-height sempre tem prioridade sobre max-height: quando os dois entram em conflito, o elemento terá pelo menos a altura de min-height, mesmo que isso exceda max-height.

Portanto, a altura efetiva é limitada ao intervalo min-height ... max-height, e o conteúdo que ultrapassar esse intervalo é controlado pela propriedade overflow.

A propriedade aceita um comprimento CSS (px, em, rem, vh, etc.) ou uma porcentagem.

Informação

Um min-height em porcentagem é calculado com base na altura do elemento pai. Se o pai não tiver uma altura definida explicitamente, a porcentagem é tratada como 0 (ou seja, não tem efeito) — uma fonte comum de confusão. Valores negativos nunca são aceitos.

Valor inicial	0
Aplica-se a	Todos os elementos, exceto elementos inline não substituídos, grupos de colunas e colunas de tabela.
Herdado	Não.
Animável	Sim. A altura é animável.
Versão	CSS2
Sintaxe DOM	object.style.minHeight = "100px";

Sintaxe

Sintaxe da propriedade CSS min-height

min-height: auto | length | percentage | calc() | initial | inherit;

Exemplo da propriedade min-height:

Exemplo da propriedade CSS min-height com valor em px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        min-height: 50px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <div>The text area's minimum height is defined as 50px.</div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade min-height especificada como "3cm":

Exemplo da propriedade CSS min-height com valor em cm

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #ccc;
      }
      p.example {
        min-height: 3cm;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <h3>Min-height: auto.</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <h3>Min-height: 3cm.</h3>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Experimente Você Mesmo »

Uso de palavras-chave baseadas no conteúdo

Além de comprimentos e porcentagens, min-height aceita palavras-chave de dimensionamento intrínseco que baseiam o mínimo no próprio conteúdo:

min-content — a menor altura que o conteúdo pode ter sem transbordar (aproximadamente a altura quando quebrado da forma mais compacta possível).
max-content — a altura que o conteúdo teria se nunca fosse forçado a quebrar linha.
fit-content() — limita ao espaço disponível, mas nunca ultrapassa max-content.

Essas opções são úteis quando você quer que uma caixa seja "tão alta quanto seu conteúdo, mas nunca menor do que isso", sem precisar definir um valor em pixel.

Um caso de uso comum: esticar para preencher um contêiner flex

min-height: 100vh é um padrão popular para layouts de "rodapé fixo" — faz com que um invólucro tenha pelo menos a altura do viewport, de modo que o rodapé fique na parte inferior mesmo em páginas curtas, enquanto ainda permite que a página cresça quando o conteúdo for longo:

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* at least the full viewport, but can grow */
}

.page main {
  flex: 1; /* pushes the footer to the bottom */
}

Por se tratar de um mínimo, o layout nunca corta conteúdo longo — a caixa simplesmente se expande além de 100vh. Combine com box-sizing: border-box para que o padding e as bordas não sejam adicionados à altura calculada de forma inesperada.

Valores

Valor	Descrição	Experimente
auto	O navegador calcula e seleciona um min-height para o elemento dado.	Experimente »
length	Define a altura mínima em px, em, rem, etc. O valor padrão é 0.	Experimente »
%	Define a altura mínima como uma porcentagem da altura do pai.
calc()	Calcula a altura mínima usando uma expressão.	Experimente »
fit-content()	Define a altura mínima com base no tamanho do conteúdo, limitada ao espaço disponível.	Experimente »
max-content	Define a altura mínima como a altura máxima intrínseca do conteúdo.	Experimente »
min-content	Define a altura mínima como a altura mínima intrínseca do conteúdo.	Experimente »
initial	Faz com que a propriedade use seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Praticar

Prática

O que a propriedade 'min-height' no CSS faz?

Define a altura mínima de um elemento.Define a altura máxima de um elemento.Não existe a propriedade 'min-height' no CSS.Permite impedir que uma caixa CSS encolha abaixo de um determinado tamanho.Define a altura exata de um elemento.

Propriedades relacionadas

height — define a altura preferida de um elemento.
max-height — limita o quanto um elemento pode crescer em altura.
min-width — o equivalente horizontal de min-height.
box-sizing — controla se o padding e as bordas contam para a altura.
overflow — determina o que acontece quando o conteúdo excede a caixa.