Comment créer un Div à défilement vertical en CSS ?

Création d'un div avec défilement vertical en CSS

Lors de la création d'un div que vous souhaitez faire défiler, il est important de comprendre la propriété de débordement . Par défaut, overflow: auto permet au contenu de s'étendre au-delà des limites du div et crée des barres de défilement pour les axes horizontal et vertical. Pour limiter le défilement à l'axe vertical uniquement, vous devez utiliser overflow-y à la place.

Overflow-y : Défilement

Utilisation de overflow-y : le défilement force un défilement vertical la barre de défilement apparaît, que le contenu dépasse ou non la hauteur du div. Ceci est utile lorsque vous souhaitez vous assurer que la barre de défilement verticale est toujours visible, même si le contenu ne dépasse pas la hauteur du div.

Débordement-y : Auto

Si vous souhaitez que la barre de défilement verticale apparaisse uniquement lorsque le contenu dépasse la hauteur du div, utilisez overflow-y: auto. Cela permet au contenu de passer automatiquement à la ligne suivante lorsqu'il atteint la fin du div, empêchant ainsi l'apparition de la barre de défilement horizontale. Cependant, si le contenu dépasse la hauteur du div, la barre de défilement verticale deviendra visible.

Exemple de code

Pour créer un div qui ne peut défiler que verticalement, utilisez le CSS suivant :

<pre class="brush:php;toolbar:false">
div {
  overflow-y: auto;
  height: 400px;
}

Ce code entraînera un div qui permet un défilement vertical lorsque le contenu dépasse la hauteur du div de 400px, tout en empêchant le défilement horizontal.

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!