webentwicklung-frage-antwort-db.com.de

Div mit CSS vertikal scrollbar machen

Diese

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

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

509
Saswat

Sie haben es abgesehen von der Verwendung der falschen Eigenschaft abgedeckt. Die Bildlaufleiste kann mit jeder Eigenschaft overflow, overflow-x oder overflow-y ausgelöst werden. Jede Eigenschaft kann auf visible, hidden, scroll, auto oder inherit. Sie sehen sich gerade diese beiden an:

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

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

Wenn Sie immer möchten, dass die vertikale Bildlaufleiste angezeigt wird:

Sie sollten overflow-y: scroll verwenden. Dies zwingt eine Bildlaufleiste für die vertikale Achse, 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 nur eine Bildlaufleiste angezeigt werden soll, wenn Sie das Feld verschieben können:

Verwenden Sie einfach overflow: auto. Da Ihre Inhalte standardmäßig nur in die nächste Zeile springen, wenn sie nicht in die aktuelle Zeile passen, wird keine horizontale Bildlaufleiste erstellt (es sei denn, sie befinden sich in einem Element, für das der Zeilenumbruch deaktiviert ist). Bei der vertikalen Leiste kann der Inhalt auf die von Ihnen angegebene Höhe erweitert werden. Wenn diese Höhe überschritten wird, wird eine vertikale Bildlaufleiste angezeigt, um den Rest des Inhalts anzuzeigen. Wenn diese Höhe nicht überschritten wird, wird jedoch keine Bildlaufleiste angezeigt.

637
animuson

Versuchen Sie es so.

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

Für eine Höhe von 100% des Ansichtsfensters verwenden Sie:

overflow: auto;
max-height: 100vh;
107
VVS

Verwenden Sie overflow-y: auto; für das Div.

Sie sollten auch die Breite einstellen.

48
Madara Uchiha

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 dem linken/rechten Rand des Inhalts geschehen soll, wenn der Inhaltsbereich des Elements überfüllt wird.
overflow-y: Die Eigenschaft overflow-y gibt an, was mit den oberen/unteren Rändern des Inhalts geschehen soll, wenn der Inhaltsbereich des Elements überfüllt wird.

Werte
sichtbar: Standardwert. Der Inhalt wird nicht beschnitten und möglicherweise außerhalb des Inhaltsfelds gerendert.
versteckt: Der Inhalt ist abgeschnitten - und es ist kein Bildlaufmechanismus vorhanden.
Bildlauf: Der Inhalt wird abgeschnitten und ein Bildlaufmechanismus wird bereitgestellt.
auto: Sollte bewirken, dass ein Bildlaufmechanismus für überlaufende Boxen bereitgestellt wird.
initial: Setzt diese Eigenschaft auf ihren Standardwert.
inherit Übernimmt diese Eigenschaft von ihrem übergeordneten Element.

27
DJ18

Sie können overflow-y: scroll zum vertikalen 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>
12
Santosh Khalse

Das Problem mit all diesen Antworten war für mich, dass sie nicht reagierten. Ich musste eine feste Größe für ein Elternteil haben, das ich nicht wollte. Ich wollte auch nicht viel Zeit mit Medienanfragen verbringen. Wenn Sie Angular verwenden, können Sie das Register "Bootstraps" verwenden, das die ganze harte Arbeit für Sie erledigt. Sie können durch den inneren Inhalt scrollen, und er reagiert. Wenn Sie die Registerkarte einrichten, gehen Sie wie folgt vor: $scope.tab = { title: '', url: '', theclass: '', ative: true }; ... Der Punkt ist, dass Sie kein Titel- oder Bildsymbol möchten. dann verstecke den Umriss der Registerkarte in cs wie folgt:

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

und auch diesen .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} und schließlich den unsichtbaren Tab, auf den Sie immer noch klicken können, wenn Sie dies nicht implementieren: .nav > li > a {padding:0px;margin:0px;}

8
Helzgate