height
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La caractéristique média CSS height permet d'appliquer des styles en fonction de la hauteur de la zone d'affichage (ou de la boîte de page, pour les médias paginés).
Syntaxe
La caractéristique height est définie comme une longueur (type <length>) et représente la hauteur de la zone d'affichage. C'est une caractéristique d'intervalle et on peut donc utiliser les variantes préfixées min-height et max-height afin de cibler des règles selon un minimum ou un maximum.
Exemples
HTML
html
<div>
Surveillez cet élément lors du redimensionnement de la zone d'affichage.
</div>
CSS
css
/* Hauteur exacte */
@media (height: 360px) {
div {
color: red;
}
}
/* Hauteur minimale */
@media (min-height: 25rem) {
div {
background: yellow;
}
}
/* Hauteur maximale */
@media (max-height: 40rem) {
div {
border: 2px solid blue;
}
}
Résultat
Spécifications
| Specification |
|---|
| Media Queries Level 4 # height |
Compatibilité des navigateurs
Chargement…