Faire défiler verticalement un div en utilisant CSS

Cette

<div id="" style="overflow:scroll; height:400px;">

donne un divque l'utilisateur peut faire défiler horizontalement et verticalement. Comment puis-je le changer pour que le div ne puisse défiler que verticalement?

Vous l'avez couvert en plus d'utiliser la mauvaise propriété. La barre de défilement peut être déclenchée avec une propriété overflow, overflow-xou overflow-ychacun peut être réglée sur l' une visible, hidden, scroll, autoou inherit. Vous regardez actuellement ces deux:

• auto- Cette valeur examinera la largeur et la hauteur de la boîte. S'ils sont définis, cela ne laissera pas la boîte s'étendre au-delà de ces limites. Au lieu de cela (si le contenu dépasse ces limites), il créera une barre de défilement pour chaque limite (ou les deux) qui dépasse sa longueur.

• scroll- Cette valeur force une barre de défilement, quoi qu'il arrive, même si le contenu ne dépasse pas la limite définie. S'il n'est pas nécessaire de faire défiler le contenu, la barre apparaîtra comme "désactivée" ou non interactive.

Si vous souhaitez toujours que la barre de défilement verticale apparaisse:

Vous devez utiliser overflow-y: scroll. Cela force une barre de défilement à apparaître pour l'axe vertical, que cela soit nécessaire ou non. Si vous ne pouvez pas faire défiler le contexte, il apparaîtra comme une barre de défilement "désactivée".

Si vous souhaitez qu'une barre de défilement apparaisse uniquement si vous pouvez faire défiler la case:

Utilisez simplement overflow: auto. Étant donné que votre contenu par défaut passe simplement à la ligne suivante lorsqu'il ne peut pas tenir sur la ligne actuelle, une barre de défilement horizontale ne sera pas créée (sauf si elle se trouve sur un élément dont le retour automatique à la ligne est désactivé). Pour la barre verticale, cela permettra au contenu de s'étendre jusqu'à la hauteur que vous avez spécifiée. S'il dépasse cette hauteur, il affichera une barre de défilement verticale pour afficher le reste du contenu, mais n'affichera pas de barre de défilement s'il ne dépasse pas la hauteur.

Essayez comme ça.

<div style="overflow-y: scroll; height:400px;">

Pour une utilisation à 100% de la hauteur de la fenêtre:

overflow: auto;
max-height: 100vh;

Utiliser overflow-y: auto;sur le div.

En outre, vous devez également définir la largeur.

Vous pouvez utiliser ce code à la place.

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

overflow-x : la propriété overflow-x spécifie quoi faire avec les bords gauche / droit du contenu - si elle déborde de la zone de contenu de l'élément.
overflow-y : la propriété overflow-y spécifie quoi faire avec les bords supérieur / inférieur du contenu - si elle déborde de la zone de contenu de l'élément.

Valeurs
visibles : valeur par défaut. Le contenu n'est pas découpé et il peut être rendu en dehors de la zone de contenu.
masqué : le contenu est tronqué - et aucun mécanisme de défilement n'est fourni.
scroll : le contenu est découpé et un mécanisme de défilement est fourni.
auto : Devrait provoquer un mécanisme de défilement pour les boîtes débordantes.
initial : définit cette propriété à sa valeur par défaut.
hériter Hérite de cette propriété de son élément parent.

Vous pouvez utiliser overflow-y: scrollpour le défilement vertical.

<div  style="overflow-y:scroll; height:400px; background:gray">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
 </div>

Le problème avec toutes ces réponses pour moi était qu'elles n'étaient pas réactives. Je devais avoir une hauteur fixe pour un parent div dont je ne voulais pas. Je ne voulais pas non plus passer une tonne de temps à réfléchir aux questions des médias. Si vous utilisez angulaire, vous pouvez utiliser le tabset bootstraps et il fera tout le travail dur pour vous. Vous pourrez faire défiler le contenu interne et il sera réactif. Lorsque vous configurez l'onglet, procédez comme suit: $scope.tab = { title: '', url: '', theclass: '', ative: true };... le fait est que vous ne voulez pas d'icône de titre ou d'image. puis masquez le contour de l'onglet en cs comme ceci:

.nav-tabs {
   border-bottom:none; 
} 

et aussi ceci .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} et enfin pour supprimer l'onglet invisible sur lequel vous pouvez toujours cliquer si vous ne l'implémentez pas:.nav > li > a {padding:0px;margin:0px;}