Div-Blöcke sind eines der Hauptelemente einer Webseite, und manchmal ist es notwendig, einen Bildlauf für den Inhalt dieser Blöcke hinzuzufügen. Dies ist oft erforderlich, wenn der Inhalt innerhalb eines div-Blocks nicht auf die Seite passt und gescrollt werden muss. In diesem Artikel werden wir uns eine detaillierte Anleitung zum Erstellen eines scrollbaren Block-Div ansehen.
Um ein Scroll-Block-Div zu erstellen, müssen Sie die CSS-Eigenschaft "overflow" verwenden. Mit dieser Eigenschaft können Sie den Bildlauftyp für den Inhalt des Blocks festlegen. Um ein Scroll-Block-Div zu erstellen, legen Sie den Stil "overflow: auto;" oder "overflow: scroll" fest;" für das gewünschte div des Elements. Beide Eigenschaftswerte erzeugen einen Bildlauf, aber es gibt einige Unterschiede zwischen ihnen. Die Eigenschaft "auto" erstellt nur dann einen Bildlauf, wenn der Inhalt nicht in den Block passt. Die Eigenschaft "scroll" erstellt immer einen Bildlauf, unabhängig davon, ob der Inhalt in den Block passt oder nicht.
Um also einen scrollbaren div-Block zu erstellen, wenden Sie den folgenden CSS-Stil an:
border: 1px solid #ccc;
Im obigen Beispiel erstellen wir einen div-Block mit einer Breite von 300px, einer Höhe von 200px und wenden Stile für den Rahmen, den Einzug und den Hintergrund an. Wichtig ist hier "overflow: auto;", das einen Bildlauf für den Inhalt des Blocks erstellt.
Um diesen Stil zu verwenden, fügen Sie einfach die Klasse "scrollable-div" zum gewünschten div hinzu:
Der Inhalt des scrollbaren Blocks.
Jetzt wird Ihr div-Block einen Bildlauf haben, wenn sein Inhalt über die angegebene Größe hinausgeht.
Wie erstelle ich einen scrollbaren Div-Block?
Um ein Scroll-Block-Div zu erstellen, müssen Sie CSS-Stile und HTML-Code verwenden. Hier ist eine Schritt-für-Schritt-Anleitung:
| Schritt 1: | Fügen Sie den folgenden HTML-Code hinzu, um ein Block-Div zu erstellen: |
| Schritt 2: | Verwenden Sie CSS-Stile, um die Größe und das Aussehen Ihres div-Blocks zu bestimmen: |
| Schritt 3: | Fügen Sie bestimmte CSS-Stile hinzu, um einen Bildlauf innerhalb Ihres div-Blocks zu erstellen: |
Als Ergebnis werden Sie einen scrollbaren div-Block erstellen, mit dem Sie den Inhalt anzeigen können, wenn er die Größe des Blocks überschreitet.
Vorbereitung auf die Erstellung
Bevor Sie einen scrollbaren div-Block erstellen können, müssen Sie mehrere Elemente vorbereiten:
| 1. | Erstellen Sie einen div-Container: |
| 2. | Legen Sie die Stile für den Container fest: |
| div#myScrollableDiv width: 300px; height: 200px; overflow: auto; > | |
| 3. | Fügen Sie den Inhalt innerhalb des Containers hinzu: |
Text oder Elemente |
Nachdem Sie diese Schritte ausgeführt haben, erhalten Sie einen scrollbaren div-Block, der die angegebene Größe hat und das Scrollen des Inhalts in sich selbst ermöglicht.
Schritte zum Erstellen eines Scroll-Block-Div
Schritt 1:
Erstellen Sie einen Hauptcontainer mit einem Tag . Weisen Sie ihm mithilfe eines Attributs eine eindeutige ID zu id, um in CSS darauf zuzugreifen. Zum Beispiel: .
Schritt 2:
Definieren Sie die Größe des Containers so, dass er eine feste Höhe und Breite hat, bei der die Bildlaufleiste angezeigt wird. Fügen Sie dazu der Eigenschaft die folgenden Stile hinzu style Containers:
Schritt 3:
Fügen Sie den Inhalt innerhalb des Containers hinzu. Sie können Inhalte wie Textblöcke oder Bilder mithilfe von Tags oder entsprechend hinzufügen.
Schritt 4:
Aktualisieren Sie die Stile Ihres Containers bei Bedarf. Sie können verschiedene CSS-Eigenschaften wie Hintergrundfarbe, Schriftgröße und Einzug verwenden, um das Aussehen Ihrer scrollbaren Diva anzupassen.
Jetzt ist Ihr scrollbarer Div-Block einsatzbereit! Sie können mehr Inhalt innerhalb des Containers hinzufügen, als er aufnehmen kann, und mit der Bildlaufleiste, die automatisch angezeigt wird, blättern.
Einrichten eines div-Blocks
Gehen Sie folgendermaßen vor, um einen scrollbaren Div-Block zu erstellen:
- Erstellen Sie ein Div-Element mit einem Tag .
- Legen Sie die gewünschten Blockgrößen mithilfe der CSS-Eigenschaften width und height fest.
- Legen Sie die Overflow-Eigenschaft des div-Blocks auf auto oder scroll fest, um einen Bildlauf hinzuzufügen.
Dies ist ein Beispiel für ein scrollbares Block-Div.
Hier kann jeder Inhalt enthalten, der nicht in die angegebenen Blockgrößen passt.
Wenn der Inhalt die Blockgröße überschreitet, wird eine Bildlaufleiste angezeigt, in der Sie den verborgenen Inhalt anzeigen können.
Beachten Sie, dass die Werte der Eigenschaften width und height sowie die Blockgrößen und der Inhalt im Beispiel illustrativ sind und an Ihre Bedürfnisse angepasst werden können.
