Propriedade CSS height
A propriedade CSS height define a altura do elemento. Experimente exemplos com cada valor desta propriedade.
A propriedade CSS height define a altura da caixa de conteúdo de um elemento — a área onde residem o texto e os elementos filhos. Por padrão (height: auto), o navegador dimensiona um elemento de bloco com altura suficiente para caber seu conteúdo, portanto você só define height quando precisa de um tamanho fixo ou relativo.
Por padrão, o valor que você fornece se aplica apenas à caixa de conteúdo — ele não inclui padding, bordas nem margens. Uma <div> com height: 100px; padding: 20px tem, portanto, 140px de altura na tela. Para fazer o height incluir padding e borda, defina box-sizing: border-box — uma prática quase universal. A propriedade complementar é width, que funciona da mesma forma para o eixo horizontal.
Você pode expressar a altura como um comprimento (px, em, rem, vh, cm, …) ou como uma porcentagem. O valor padrão é auto.
Se as propriedades min-height e max-height também estiverem definidas, elas limitam o height: o elemento nunca encolhe abaixo de min-height nem cresce além de max-height.
Quando height tem um valor numérico e o conteúdo é mais alto do que essa altura, o conteúdo transborda sua caixa. A propriedade overflow controla o que acontece então — recortá-lo, ocultá-lo ou adicionar uma barra de rolagem.
Valores negativos não são aceitos.
O problema das porcentagens. Uma height em porcentagem é resolvida em relação à altura do elemento pai — e somente se esse pai tiver uma altura explícita. Se a altura do pai for auto (o padrão), o height: 50% de um filho não tem referência fixa e é tratado como auto, parecendo não ter efeito. Para fazer as alturas em porcentagem cascatear até a página, dê aos ancestrais uma altura explícita — comumente html, body { height: 100%; } — ou use a unidade de viewport vh (height: 50vh é sempre metade do viewport, independentemente do pai).
| Valor Inicial | auto |
|---|---|
| Aplica-se a | todos os elementos |
| Herdado | Não. |
| Animável | Sim. Height é animável. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.height = "400px"; |
Sintaxe
Sintaxe da propriedade CSS height
height: auto | length | initial | inherit;Exemplo da propriedade height:
Exemplo da propriedade CSS height com valor de comprimento
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 60px;
background-color: #1c87c9;
color: #eee;
}
p {
height: 30px;
background-color: #8ebf42;
color: #eee;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div>The height of this div element is set to "60px".</div>
<p>The height of this paragraph is set to "30px".</p>
</body>
</html>Resultado
Exemplo da propriedade height com a tag HTML <image>:
Exemplo da propriedade CSS height com valores auto e de comprimento
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-color: #ccc;
}
.height-normal {
height: auto;
}
.height-big {
height: 100px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<p>Here the height is set to "auto"</p>
<img class="height-normal" src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<br />
<hr />
<p>The height for this image is defined as "100px".</p>
<img class="height-big" src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
</body>
</html>Exemplo da propriedade height com o valor "length":
Exemplo da propriedade CSS height usando valor vh
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.container {
height: 50vh;
border: 2px solid #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div class="container">
<p>Here the height is specified as "50vh".</p>
</div>
</body>
</html>Exemplo da propriedade height com todos os valores:
Exemplo da propriedade CSS height com valores auto, vh, % e px
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.red-container {
height: 30vh;
border: 2px solid #f45e30;
color: #f45e30;
}
.blue-container {
height: 40%;
width: 30%;
border: 2px solid #1c87c9;
color: #1c87c9;
margin-top: 20px;
}
.orange-container {
height: 100px;
border: 2px solid #f9fc35;
color: #f9fc35;
margin-top: 20px;
}
.green-container {
height: auto;
border: 2px solid #8ebf42;
color: #8ebf42;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Height property example</h2>
<div class="red-container">
Height 30vh
<div class="blue-container">
Height 40%
</div>
</div>
<div class="orange-container">
Height 100px;
</div>
<div class="green-container">
Height (auto)
</div>
</body>
</html>Palavras-chave de dimensionamento intrínseco
Além de comprimentos fixos e porcentagens, o CSS moderno adiciona palavras-chave que dimensionam um elemento pelo seu conteúdo em vez de por um número:
.box {
height: max-content; /* tall enough for the content, never wrapping it shorter */
}
.box {
height: min-content; /* the smallest height the content can take */
}
.box {
height: fit-content; /* like auto, but clamps to fit-content(<length>) when given */
}Elas são mais úteis em layouts de Flexbox e CSS Grid, onde você quer que uma faixa ou item se ajuste ao seu conteúdo em vez de se esticar. São amplamente suportadas nos navegadores atuais.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| auto | Ao usar este valor, o navegador calcula a altura original da imagem ou caixa. Este é o valor padrão desta propriedade. | Experimente » |
| length | Define a altura com px, cm, em, rem, vh, etc. | Experimente » |
| % | Define a altura com porcentagem. | |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade de seu elemento pai. |