Section plein écran juste en CSS

de | juillet 14, 2015

Bonjour,

Aujourd’hui, je vais vous parler d’une découverte que j’ai fais. C’est le genre de découverte qui vous fait aimer le CSS. Je parle ici de l’unité de mesure CSS Viewport.

Comme beaucoup de monde, lorsque je voulais une partie de mon site en plein écran, j’avais le choix entre deux techniques. Soit détecter en javascript la hauteur de l’écran de l’utilisateur et modifier la taille de la section en conséquence. L’avantage étant d’être compatible avec l’ensemble des navigateurs. Soit je définir la taille de la section et de tout ses parents à 100%.

 html, body {
height: 100%;
}

section {
height: 100%;
} 

Cela me convenait relativement bien. Seulement je me suis mis à utiliser le framework JavaScript EmberJS qui rajoute des blocs DIV autour de mes éléments. N’ayant aucun contrôle sur ceux-ci, La méthode full CSS ne convenait plus.

En cherchant, une autre solution, je suis tombé sur l’unité de mesure Viewport qui comme son nom l’indique permet de fixer la taille d’un élément par rapport au Viewport.

 section {
height: 100vh;
} 

Cette méthode ne tient plus compte de la taille des éléments parents. Nous pouvons aussi utiliser les unités vw, vmim, vmax pour respectivement définir la taille de l’élément suivant la largeur du Viewport, l’axe le plus petit ( longueur ou largeur) et l’axe le plus grand ( longueur ou largeur). Cette méthode est supporté par l’ensemble des navigateurs modernes à partir d’IE9.

A bientôt.

00
Catégorie : CSS Étiquettes :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.