6.4 Hauteur et largeur CSS

blockquote { width: 600px;}

Le blockquote ne prendra pas toute la largeur disponible, mais restera 600px large quelle que soit la situation :

• si la fenêtre du navigateur est inférieure à 600 px, une barre de défilement horizontale s’affichera.
• si la fenêtre du navigateur est plus large que 600px, la citation de bloc restera 600px de large et n’occupera pas tout l’espace

Comme nous n’avons défini que la largeur, la citation de bloc reste fluide en hauteur : la hauteur devient la dimension variable adaptée au contenu de la citation de bloc.

Réglage de la hauteur et de la largeur

En définissant les dimensions d’un élément, celui-ci reste fixe quelle que soit la longueur de son contenu.

Que se passe-t-il si le contenu est plus long que l’élément ne peut contenir ?

Parce que nous empêchons l’élément de modifier dynamiquement ses dimensions, le contenu risque d’être plus long que ce que l’élément accepte et de déborder/dépasser par la suite.

Le comportement par défaut peut être surprenant: le contenu sera quand même affiché !

blockquote { background: yellow; height: 50px; width: 100px;}

<blockquote>The content er... finds a way</blockquote>

Débordement CSS

La propriété CSS overflow nous permet de gérer le cas où le contenu est plus long que son conteneur.

La valeur par défaut est visible: le contenu sera quand même affiché, car « Pourquoi voudriez-vous empêcher le contenu d’être lu par l’utilisateur s’il est présent dans le code? ». Vous pouvez considérer que le HTML prévaut sur le CSS.

En appliquant overflow: hidden;, vous interdisez de montrer, vous masquez (à l’écran) tout contenu débordant.

Si vous souhaitez que votre contenu déborde mais que vous souhaitiez tout de même le rendre accessible, vous pouvez décider d’afficher les barres de défilement en appliquant overflow: scroll.

Une meilleure option consiste à utiliser overflow: auto, car les barres de défilement n’apparaissent que si le contenu déborde, mais restent masquées jusqu’à ce que ce débordement soit effectif.

Attention aux dimensions fixes

L’application de dimensions spécifiques est souvent nécessaire pour qu’une conception soit visuellement attrayante, mais peut avoir des conséquences inattendues. À cet égard :

• assurez-vous que votre contenu ne déborde pas
• si c’est le cas, utilisez overflow: hidden ou overflow: auto pour empêcher la rupture de votre conception.