Proprietà height in CSS
La proprietà CSS height imposta l'altezza di un elemento. Prova esempi con ciascuno dei valori disponibili.
La proprietà CSS height imposta l'altezza del content box di un elemento — l'area in cui risiedono testo ed elementi figli. Per impostazione predefinita (height: auto) il browser ridimensiona un elemento di blocco in modo da contenere il suo contenuto, quindi si imposta height solo quando si ha bisogno di una dimensione fissa o relativa.
Per impostazione predefinita, il valore specificato si applica solo al content box — non include padding, bordi o margini. Un <div> con height: 100px; padding: 20px è quindi alto 140px sullo schermo. Per fare in modo che height includa padding e bordo, imposta box-sizing: border-box — una pratica quasi universale. La proprietà complementare è width, che funziona allo stesso modo per l'asse orizzontale.
L'altezza può essere espressa come lunghezza (px, em, rem, vh, cm, …) o come percentuale. Il valore predefinito è auto.
Se sono impostate anche le proprietà min-height e max-height, queste limitano height: l'elemento non si riduce mai al di sotto di min-height né cresce oltre max-height.
Quando height è un valore numerico e il contenuto è più alto di quell'altezza, il contenuto fuoriesce dal suo box. La proprietà overflow controlla cosa succede in quel caso — tagliare, nascondere o aggiungere una barra di scorrimento.
I valori negativi non sono accettati.
Il problema delle percentuali. Un height percentuale viene risolto rispetto all'altezza dell'elemento padre — e solo se quel padre ha un'altezza esplicita. Se l'altezza del padre è auto (il valore predefinito), il height: 50% di un figlio non ha un riferimento fisso e viene trattato come auto, quindi sembra non fare nulla. Per far scendere le altezze percentuali fino alla pagina, assegna agli antenati un'altezza esplicita — comunemente html, body { height: 100%; } — oppure usa l'unità viewport vh (height: 50vh è sempre la metà del viewport, indipendentemente dal padre).
| Valore iniziale | auto |
|---|---|
| Si applica a | tutti gli elementi |
| Ereditata | No. |
| Animabile | Sì. L'altezza è animabile. |
| Versione | CSS1 |
| Sintassi DOM | object.style.height = "400px"; |
Sintassi
Sintassi della proprietà CSS height
height: auto | length | initial | inherit;Esempio della proprietà height:
Esempio della proprietà CSS height con valore length
<!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>Risultato
Esempio della proprietà height con il tag HTML <image>:
Esempio della proprietà CSS height con i valori auto e length
<!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>Esempio della proprietà height con il valore "length":
Esempio della proprietà CSS height usando il valore 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>Esempio della proprietà height con tutti i valori:
Esempio della proprietà CSS height con i valori 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>Parole chiave di dimensionamento intrinseco
Oltre alle lunghezze fisse e alle percentuali, il CSS moderno aggiunge parole chiave che dimensionano un elemento in base al suo contenuto anziché a un numero:
.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 */
}Questi sono particolarmente utili nei layout flex e grid, dove si vuole che una traccia o un elemento si adatti al proprio contenuto invece di estendersi. Sono ampiamente supportati dai browser attuali.
Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| auto | Con questo valore, il browser calcola l'altezza originale dell'immagine o del box. Questo è il valore predefinito della proprietà. | Provalo » |
| length | Definisce l'altezza con px, cm, em, rem, vh, ecc. | Provalo » |
| % | Definisce l'altezza in percentuale. | |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dal suo elemento padre. |