Cet article illustre l'utilisation de la propriété CSS overflow-y avec de nombreux exemples.
Comment utiliser la propriété Overflow-y en CSS ?
Le SSC ' débordement-y ” est utilisée pour contrôler le débordement du contenu le long de l'axe transversal dans un élément. Il spécifie s'il faut couper le contenu ou ajouter une barre de défilement lorsque le contenu dépasse la hauteur du conteneur. Les valeurs possibles pour cette propriété sont ' visible ”, “ caché ”, “ faire défiler ', et ' auto ”.
Visitons les exemples ci-dessous pour une meilleure démonstration de la propriété overflow-y :
Exemple 1 : Utilisation de Visible comme valeur pour la propriété Overflow-y
Le ' visible ” permet au contenu de déborder du conteneur et n'ajoute aucun écrêtage ou barre de défilement. Visitez le bloc de code pratique ci-dessous :
>
>
La description du bloc de code ci-dessus :
- Tout d'abord, attribuez une valeur de ' parent ' au ' classe ' et utilisez le ' style ' attribut.
- De plus, indiquez la valeur de ' visible « au CSS » débordement-y ' propriété. Et mettez-le égal à ' style ” pour que le style CSS fonctionne.
- Ensuite, créez un ' div ” élément et attribuez-lui une classe de “ enfantContenu ”. Fournissez-lui également des données factices.
Maintenant, utilisez les propriétés CSS pour améliorer la visualisation, ce qui aide à mieux comprendre la propriété CSS overflow-y :
.parent {largeur : 200px ;
hauteur : 150px ;
frontière : 1px solide noir ;
}
.childContent {
hauteur : 300px ;
Couleur de l'arrière plan : bleu clair ;
}
La description des propriétés CSS est donnée ci-dessous :
- Premièrement la ' parent ” classe est sélectionné et les valeurs de “ 200px ”, “ 150px ', et ' 1px noir solide « sont attribués au CSS » largeur ”, “ hauteur ', et ' frontière ” propriétés, respectivement.
- Ensuite, sélectionnez le ' enfantContenu ' classe et définissez les valeurs de ' 300px ' et ' bleu clair « au CSS » hauteur ' et ' Couleur de l'arrière plan ” propriétés, respectivement. Cette classe est étendue au « parent « classe qui est contrôlée par le CSS » débordement ' propriété.
Après la compilation des extraits de code, la page Web apparaît comme ceci :
L'instantané affiche que le contenu de débordement est désormais visible et que la barre de défilement ou le découpage n'est pas ajouté par défaut.
Exemple 2 : Utilisation de Hidden comme valeur pour la propriété Overflow-y
Le ' débordement-y ' propriété avec une valeur de ' caché ' cache tout le contenu qui se déplace en dehors de son conteneur parent. Cette propriété n'ajoute pas de barres de défilement à la place, elle a coupé le contenu débordé :
>
>
L'extrait de code ci-dessus contient :
- Tout d'abord, le même code est inséré à nouveau avec une augmentation du contenu factice placé à l'intérieur de l'élément div interne.
- Ensuite, modifiez la valeur de ' débordement-y 'propriété à' caché ' au ' ” tag ayant une classe de “ parent ”.
Après le rendu, la page Web ressemble à ceci :
L'instantané indique que le contenu de débordement a été coupé.
Exemple 3 : Utilisation de Scroll comme valeur pour la propriété Overflow-y
Réglage de la valeur de ' débordement-y « propriété à la » faire défiler ” permet à l'utilisateur final de faire défiler
contenu qui le déborde. Visitons le bloc de code ci-dessous :
= 'parent' style = 'débordement-y : faire défiler ;' >
= 'contenu enfant' > C'est juste factice contenu utilisé pour la démonstration de la propriété overflow-y lorsqu'elle est définie sur visible. C'est juste factice contenu utilisé pour la démonstration de la propriété overflow-y lorsqu'elle est définie sur visible.
>
>Dans le bloc de code ci-dessus :
- Tout d'abord, la même structure HTML a été insérée à l'intérieur du '
' étiqueter. - Ensuite, modifiez la valeur de ' débordement-y « propriété à la » faire défiler ”. Cela permet au « parent ” div pour activer l'effet de défilement pour contrôler le contenu débordé.
Après la compilation du bloc de code ci-dessus, la page Web apparaît comme ceci :
Le gid ci-dessus illustre que l'effet de défilement a été disponible pour contrôler le contenu débordé.
Exemple 4 : Utilisation de Auto comme valeur pour la propriété Overflow-y
Dans cet exemple, les utilisateurs peuvent ajouter une barre de défilement uniquement si le contenu ne tient pas dans le conteneur. De plus, si le contenu ne déborde pas, la barre de défilement ne sera pas ajoutée. Il est possible en fournissant la valeur de ' auto « au CSS » débordement-y ' propriété:
= 'parent' style = 'débordement-y : auto ;' >
= 'contenu enfant' > C'est juste factice contenu utilisé pour la démonstration de la propriété overflow-y lorsqu'elle est définie sur visible. C'est juste factice contenu utilisé pour la démonstration de la propriété overflow-y lorsqu'elle est définie sur visible.
>
>Dans le bloc de code ci-dessus :
- Tout d'abord, insérez le même fichier HTML dans le '
' étiqueter. - Ensuite, mettez à jour la valeur de ' débordement-y 'propriété à' auto ”. Il permet l'effet de défilement par rapport à la longueur verticale du contenu.
Après la fin du processus de compilation, la page Web fonctionne comme ceci :
Le gif ci-dessus affiche la propriété de débordement qui a activé la barre de défilement en fonction de la longueur du contenu.
Conclusion
Le SSC ' débordement-y ” est utilisée pour contrôler le contenu débordé le long de l'axe transversal dans un élément. La propriété overflow-y contrôle le contenu en fonction de la valeur spécifique fournie aux propriétés overflow-y. Le ' visuel ” affiche le contenu débordé, la valeur “ caché ” masque le contenu de débordement et la valeur “ faire défiler ” valeur ajoute une barre de défilement pour contrôler le contenu. Et si la valeur est ' auto ” la barre de défilement ajoute ou supprime selon la longueur du contenu.
- Tout d'abord, la même structure HTML a été insérée à l'intérieur du '