Ein Div mit CSS vertikal scrollbar machen

Diese

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

gibt ein, divdass der Benutzer sowohl horizontal als auch vertikal scrollen kann. Wie ändere ich es so, dass das div nur vertikal scrollbar ist?

Sie haben es abgesehen von der Verwendung der falschen Eigenschaft abgedeckt. Die Scrollbar kann mit jeder Eigenschaft ausgelöst werden overflow, overflow-xoder , overflow-yund jeder kann zu einem eingestellt werden visible, hidden, scroll, auto, oder inherit. Sie sehen sich derzeit diese beiden an:

• auto- Dieser Wert bezieht sich auf die Breite und Höhe der Box. Wenn sie definiert sind, wird das Feld nicht über diese Grenzen hinaus erweitert. Stattdessen (wenn der Inhalt diese Grenzen überschreitet) wird eine Bildlaufleiste für eine der Grenzen (oder beide) erstellt, die ihre Länge überschreitet.

• scroll- Dieser Wert erzwingt eine Bildlaufleiste, egal was passiert, auch wenn der Inhalt den festgelegten Grenzwert nicht überschreitet. Wenn der Inhalt nicht gescrollt werden muss, wird die Leiste als "deaktiviert" oder nicht interaktiv angezeigt.

Wenn die vertikale Bildlaufleiste immer angezeigt werden soll:

Sie sollten verwenden overflow-y: scroll. Dadurch wird eine Bildlaufleiste für die vertikale Achse angezeigt, unabhängig davon, ob sie benötigt wird oder nicht. Wenn Sie den Kontext nicht scrollen können, wird er als "deaktivierte" Bildlaufleiste angezeigt.

Wenn Sie nur eine Bildlaufleiste anzeigen möchten, wenn Sie das Feld scrollen können:

Einfach benutzen overflow: auto. Da Ihr Inhalt standardmäßig nur zur nächsten Zeile wechselt, wenn er nicht in die aktuelle Zeile passt, wird keine horizontale Bildlaufleiste erstellt (es sei denn, er befindet sich in einem Element, für das der Zeilenumbruch deaktiviert ist). Für die vertikale Leiste kann der Inhalt bis zu der von Ihnen angegebenen Höhe erweitert werden. Wenn diese Höhe überschritten wird, wird eine vertikale Bildlaufleiste angezeigt, um den Rest des Inhalts anzuzeigen. Wenn die Höhe nicht überschritten wird, wird jedoch keine Bildlaufleiste angezeigt.

Versuchen Sie es so.

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

Verwenden Sie für eine Höhe von 100% des Ansichtsfensters:

overflow: auto;
max-height: 100vh;

Verwenden Sie overflow-y: auto;auf dem div.

Außerdem sollten Sie auch die Breite einstellen.

Sie können stattdessen diesen Code verwenden.

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

overflow-x : Die Eigenschaft overflow-x gibt an, was mit den linken / rechten Rändern des Inhalts zu tun ist - wenn der Inhaltsbereich des Elements überläuft.
overflow-y : Die Eigenschaft overflow-y gibt an, was mit den oberen / unteren Rändern des Inhalts geschehen soll - wenn der Inhaltsbereich des Elements überläuft.

Werte
sichtbar : Standardwert. Der Inhalt wird nicht abgeschnitten und kann außerhalb des Inhaltsfelds gerendert werden.
versteckt : Der Inhalt wird abgeschnitten - und es wird kein Bildlaufmechanismus bereitgestellt.
Scroll : Der Inhalt wird abgeschnitten und ein Scroll - Mechanismus vorgesehen.
auto : Sollte dazu führen, dass ein Bildlaufmechanismus für überlaufende Boxen bereitgestellt wird.
initial : Setzt diese Eigenschaft auf den Standardwert.
erben Erbt diese Eigenschaft von ihrem übergeordneten Element.

Sie können overflow-y: scrollfür vertikales Scrollen verwenden.

<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>

Das Problem bei all diesen Antworten war für mich, dass sie nicht reagierten. Ich musste eine feste Höhe für ein Eltern-Div haben, was ich nicht wollte. Ich wollte auch nicht viel Zeit damit verbringen, mich mit Medienanfragen zu beschäftigen. Wenn Sie Angular verwenden, können Sie das Bootstraps-Tabset verwenden, das die ganze harte Arbeit für Sie erledigt. Sie können den inneren Inhalt scrollen und er reagiert. Wenn Sie die Registerkarte einrichten, gehen Sie folgendermaßen vor: $scope.tab = { title: '', url: '', theclass: '', ative: true };... Der Punkt ist, dass Sie kein Titel- oder Bildsymbol möchten. Verstecken Sie dann den Umriss der Registerkarte in cs wie folgt:

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

und auch dies .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} und schließlich, um die unsichtbare Registerkarte zu entfernen, auf die Sie noch klicken können, wenn Sie dies nicht implementieren:.nav > li > a {padding:0px;margin:0px;}