Faire défiler une div verticalement en utilisant CSS
Cette
<div id="" style="overflow:scroll; height:400px;">donne une div que l'utilisateur peut faire défiler horizontalement et verticalement. Comment puis-je le changer pour que la div soit seulement défilable verticalement?
Vous l'avez couvert en dehors de l'utilisation de la mauvaise propriété. La barre de défilement peut être déclenchée avec n'importe quelle propriété overflow, overflow-x ou overflow-y, et chacune peut être définie sur l'un des visible, hidden, scroll, auto ou inherit. Vous regardez actuellement ces deux:
auto- Cette valeur va regarder la largeur et la hauteur de la boîte. Si elles sont définies, 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 l'une des limites (ou les deux) qui dépasse sa longueur.scroll- Cette valeur force une barre de défilement, quoi qu'il en soit, 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 toujours voulez que la barre de défilement verticale apparaisse:
Vous devriez utiliser overflow-y: scroll. Ceci oblige une barre de défilement à apparaître pour l'axe vertical, que celle-ci soit nécessaire ou non. Si vous ne pouvez pas réellement faire défiler le contexte, il apparaîtra comme une barre de défilement "désactivée".
Si vous voulez seulement qu'une barre de défilement apparaisse si vous pouvez faire défiler la case:
Il suffit d'utiliser overflow: auto. Comme votre contenu par défaut ne fait que passer à la ligne suivante lorsqu'il ne peut pas tenir sur la ligne actuelle, aucune barre de défilement horizontale ne sera créée (à moins que ce ne soit sur un élément pour lequel le retour à la ligne Word est désactivé). Pour la barre verticale, cela permettra au contenu de s’étendre jusqu’à la hauteur que vous avez spécifiée. Si elle dépasse cette hauteur, une barre de défilement verticale apparaîtra pour afficher le reste du contenu, mais ne sera pas affichée si elle ne dépasse pas la hauteur.
Essayez comme ça.
<div style="overflow-y: scroll; height:400px;">Pour une hauteur de fenêtre d'affichage de 100%, utilisez:
overflow: auto;
max-height: 100vh;
Utilisez overflow-y: auto; sur le div.
En outre, vous devriez é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 ce qu'il faut faire des bords supérieur/inférieur du contenu - si elle déborde de la zone de contenu de l'élément.
Valeurs
visible: valeur par défaut. Le contenu n'est pas tronqué et peut être rendu en dehors de la zone de contenu.
hidden: Le contenu est tronqué - et aucun mécanisme de défilement n'est fourni.
scroll: Le contenu est tronqué 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é sur sa valeur par défaut.
hériter Hérite cette propriété de son élément parent.
Vous pouvez utiliser overflow-y: scroll pour 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éceptives. Je devais avoir une hauteur fixe pour un parent div que je ne voulais pas. Je ne voulais pas non plus passer beaucoup de temps à me plonger dans les requêtes des médias. Si vous utilisez angular, vous pouvez utiliser bootstraps tabset et tout le travail sera fait 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 de titre ni d'icône d'image. puis masquez le contour de l'onglet dans 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;}