Maison > interface Web > tutoriel CSS > Comment rendre un Div défilable verticalement avec CSS uniquement ?

Comment rendre un Div défilable verticalement avec CSS uniquement ?

Susan Sarandon
Libérer: 2024-12-21 14:41:09
original
135 Les gens l'ont consulté

How Do I Make a Div Vertically Scrollable with CSS Only?

Créer un div à défilement vertical à l'aide de CSS

Lors de la tentative de création d'un div à défilement vertical, définissez le débordement de la propriété CSS : scroll ; peut autoriser par inadvertance le défilement horizontal et vertical. Pour restreindre le défilement à l'axe vertical uniquement, il est nécessaire d'ajuster la propriété CSS.

Correction de la propriété CSS

La propriété overflow-x contrôle le défilement horizontal , tandis que overflow-y contrôle le défilement vertical. Pour garantir un défilement vertical uniquement, vous pouvez utiliser l'une des approches suivantes :

Forcer une barre de défilement verticale

Si vous souhaitez qu'une barre de défilement verticale apparaisse toujours, quel que soit le la hauteur du contenu, utilisez :

overflow-y: scroll;
Copier après la connexion

Cela force une barre de défilement verticale, même si le contenu ne dépasse pas la hauteur du contenu. div.

Barre de défilement verticale conditionnelle

Si vous souhaitez qu'une barre de défilement verticale apparaisse uniquement lorsque le contenu dépasse la hauteur du div, utilisez :

overflow: auto;
Copier après la connexion

Cela ajoutera automatiquement une barre de défilement verticale uniquement si le contenu est trop haut pour tenir dans la hauteur du div.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal