Wie erstelle ich ein vertikal scrollendes Div in CSS?

Erstellen eines Div mit vertikalem Scrollen in CSS

Beim Erstellen eines Div, das scrollbar sein soll, ist es wichtig, die Überlaufeigenschaft zu verstehen . Standardmäßig ermöglicht overflow: auto, dass sich der Inhalt über die Grenzen des div hinaus erstreckt und erstellt Bildlaufleisten sowohl für die horizontale als auch für die vertikale Achse. Um das Scrollen nur auf die vertikale Achse zu beschränken, müssen Sie stattdessen overflow-y verwenden.

Overflow-y: Scrollen

Die Verwendung von overflow-y: scroll erzwingt eine Vertikale Die Bildlaufleiste wird angezeigt, unabhängig davon, ob der Inhalt die Div-Höhe überschreitet. Dies ist nützlich, wenn Sie sicherstellen möchten, dass die vertikale Bildlaufleiste immer sichtbar ist, auch wenn der Inhalt nicht über die Höhe des Divs hinausgeht.

Overflow-y: Auto

Wenn Sie möchten, dass die vertikale Bildlaufleiste nur angezeigt wird, wenn der Inhalt die Div-Höhe überschreitet, verwenden Sie overflow-y: auto. Dadurch kann der Inhalt automatisch zur nächsten Zeile wechseln, wenn er das Ende des Div erreicht, wodurch verhindert wird, dass die horizontale Bildlaufleiste angezeigt wird. Wenn der Inhalt jedoch die Höhe des Divs überschreitet, wird die vertikale Bildlaufleiste sichtbar.

Beispielcode

Um ein Div zu erstellen, das nur vertikal gescrollt werden kann, verwenden Sie die folgendes CSS:

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

Dieser Code führt zu einem Div, das vertikales Scrollen ermöglicht, wenn der Inhalt die Div-Höhe von überschreitet 400 Pixel, während horizontales Scrollen verhindert wird.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein vertikal scrollendes Div in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!