Wie kann ich die Höhe des Blocks richtig festlegen, damit er die gesamte verfügbare Fläche der Seite einnimmt und für die Benutzer ästhetisch und attraktiv aussieht

Die zunehmende Verfügbarkeit von Daten über die API und die aktive Nutzung dynamischer Inhalte haben die Entwicklung einer ansprechenden und harmonischen Website-Schnittstelle zu einem wichtigen Thema gemacht. Eine wichtige Aufgabe der Webentwicklung bleibt die Festlegung der Höhe des Containerblocks, der den verbleibenden Platz auf der Seite füllen soll. Dies kann beispielsweise nützlich sein, um «klebrige» Auskleidungen zu erstellen oder den Blöcken die gleiche Höhe zu verleihen. Obwohl JavaScript häufig verwendet wird, um dieses Problem zu lösen, gibt es eine Möglichkeit, dies mit reinem HTML und CSS zu tun.

Eine Möglichkeit, das Problem zu lösen, ist die Verwendung von Flexboxen. Flexboxen sind eine effiziente und einfach zu bedienende Technik, mit der Sie die flexible Verteilung von Elementen in einem Container bestimmen können. Es ermöglicht Ihnen, die Größe von Elementen, deren Reihenfolge und Positionierung mit nur wenigen CSS-Eigenschaften zu ändern. Um einen Block zu erstellen, der den verbleibenden Platz auf der Seite ausfüllt, müssen Sie mehrere CSS-Regeln auf den Container und die Elemente anwenden. Außerdem werden Flexboxen von allen modernen Browsern gut unterstützt.

Eine andere Möglichkeit, die Blockhöhe bis zum Ende der Seite festzulegen, besteht darin, Tabellen zu verwenden. Tables in HTML bieten eine einfache Möglichkeit, die Größe von Containern und Elementen auf einer Webseite festzulegen. Sie können eine Tabelle mit zwei Zellen verwenden, um einen Block zu erstellen, der den verbleibenden Platz ausfüllt. Eine Zelle enthält den gesamten Hauptinhalt der Seite und die zweite Zelle füllt den Rest des Bildschirms aus. Mit dem richtigen Markup und dem Anpassen der CSS-Eigenschaften können Sie einen Container erstellen, der immer bis zum Ende der Seite hoch ist.

HTML-Technik zum Erstellen eines Blocks mit der gesamten Seitenhöhe

Wenn Sie einen Block erstellen möchten, der die gesamte Seitenhöhe einnimmt, ohne JavaScript zu verwenden, können Sie die folgende Technik verwenden:

1. Installieren Sie es für einen Container (zB, div) Eigenschaft min-height: 100vh;. Dadurch kann der Block die gesamte verfügbare Bildschirmhöhe einnehmen.
2. Legen Sie die Eigenschaft für den Container fest display: flex; Damit die untergeordneten Elemente innerhalb des Blocks vertikal verteilt werden.

Содержимое блока
Дополнительное содержимое блока

Auf diese Weise nimmt der Block die gesamte Höhe der Seite ein und sein Inhalt wird vertikal angeordnet.

Tags und Eigenschaften zum Definieren der Blockhöhe

Die Definition der Blockhöhe ohne JS kann mit den folgenden Tags und Eigenschaften erfolgen:

1. Tag - ist das Basistag zum Erstellen eines Blocks und kann verwendet werden, um die Blockhöhe mithilfe der height-Eigenschaft festzulegen. Zum Beispiel:

Содержимое блока

In diesem Beispiel ist die Eigenschaft height: 100vh; gibt an, dass die Blockhöhe 100% der Höhe des sichtbaren Bereichs des Browserfensters einnehmen soll.

2. Tag - Kann verwendet werden, um den Inhalt zu gruppieren und die Blockhöhe mithilfe der height-Eigenschaft festzulegen. Zum Beispiel:

Содержимое блока

In diesem Beispiel ist die Eigenschaft height: 100vh; gibt an, dass die Blockhöhe 100% der Höhe des sichtbaren Bereichs des Browserfensters einnehmen soll.

3. Tag - Wird verwendet, um einen einzelnen Artikel zu entwerfen und kann auch verwendet werden, um die Blockhöhe festzulegen. Zum Beispiel:

Содержимое блока

In diesem Beispiel ist die Eigenschaft height: 100vh; gibt an, dass die Blockhöhe 100% der Höhe des sichtbaren Bereichs des Browserfensters einnehmen soll.

4. Die Eigenschaft min-height - kann verwendet werden, um die minimale Blockhöhe festzulegen. Zum Beispiel:

Содержимое блока

In diesem Beispiel gibt die Eigenschaft min-height: 500px; an, dass die Blockhöhe mindestens 500 Pixel betragen muss. Wenn der Inhalt des Blocks größer als 500 Pixel ist, wird er bei Bedarf erweitert.

Mit diesen Tags und Eigenschaften können Sie die Blockhöhe ohne JS definieren, was beim Erstellen eines ansprechenden Designs und beim Platzieren von Inhalten auf die gesamte Seitenhöhe nützlich sein kann.

Wie verwende ich Flexbox, um die Blockhöhe bis zum Ende der Seite zu erreichen

Es genügt, mehrere Stile auf den übergeordneten Container und das untergeordnete Element anzuwenden.

1. Stellen Sie die Höhe des Elternteils mit der Eigenschaft "height: 100vh" auf 100% ein. Dadurch kann der Container die gesamte verfügbare Höhe des Browserfensters einnehmen.

2. Verwenden Sie flexbox auf dem übergeordneten Container, um die Verteilung der untergeordneten Elemente zu steuern. Fügen Sie die Eigenschaft "display: flex" und gegebenenfalls weitere Flexbox-Eigenschaften hinzu, um festzulegen, wie die untergeordneten Elemente über die Hauptachse und die Querachse verteilt werden sollen.

3. Stellen Sie die Höhe des untergeordneten Elements auf "100%" ein. Dadurch wird die gesamte verfügbare Höhe des übergeordneten Containers belegt.

Als Ergebnis wird der Block die gesamte Höhe der Seite einnehmen und sich automatisch bis zum Ende des Browserfensters ausdehnen.

Beispielcode:

  
Ваш контент здесь  

Stile:

.container  display: flex; height: 100vh;>.content  height: 100%;>

Wenden Sie diese Stile auf Ihren übergeordneten Container und Ihr untergeordnetes Element an, und Ihr Block nimmt die gesamte verfügbare Seitenhöhe ein!

Erstellen eines Blocks mit einem CSS-Grid-System

Das CSS-Grid-System bietet eine bequeme Möglichkeit, Blöcke zu erstellen, die die gesamte verfügbare Seitenhöhe einnehmen. Verwenden Sie dazu die Eigenschaft display: grid; und bestimmen Sie die Anzahl der Zeilen mithilfe der Eigenschaft grid-template-rows .

.container

In diesem Beispiel wird ein Container mit einer container-Klasse erstellt, die das CSS-Grid-System verwendet. Eigenschaft grid-template-rows: 1fr; gibt an, dass der Container aus einer einzigen Zeile besteht, die den gesamten verfügbaren vertikalen Platz belegt.

Verwenden Sie dann die Eigenschaft height: 100vh;, um die Höhe des Containers auf die Höhe des sichtbaren Bereichs des Browserfensters festzulegen.

Wenn Sie nun den Inhalt innerhalb des Containers hinzufügen, nimmt er die gesamte verfügbare Blockhöhe ein und dehnt sich bis zum Ende der Seite aus.

Die Verwendung eines CSS-Grid-Systems macht es einfach, Blöcke zu erstellen, die die gesamte Seitenhöhe ausfüllen, ohne dass JavaScript benötigt wird.

Wie verwende ich Pseudoelemente, um die Blockhöhe festzulegen

Zunächst müssen Sie die position: relative-Eigenschaft des übergeordneten Blocks festlegen, damit das Pseudoelement relativ zu ihm positioniert werden kann. Anschließend können Sie ein Pseudoelement mit ::before oder ::after erstellen und die folgenden Eigenschaften festlegen:

• content: ""; - legt den leeren Inhalt für das Element fest.
• position: absolute; - Ermöglicht es dem Element, sich absolut zu positionieren.
• left: 0; - Legt die Position des Pseudoelements relativ zur linken Blockgrenze fest.
• top: 0; - Legt die Position des Pseudoelements relativ zur oberen Blockgrenze fest.
• right: 0; - Legt die Position des Pseudoelements relativ zum rechten Rand des Blocks fest.
• bottom: 0; - Legt die Position des Pseudoelements relativ zum unteren Rand des Blocks fest.
• background-color: #f5f5f5; - Legt die Hintergrundfarbe des Pseudoelements fest.
• z-index: -1; - Legt die Reihenfolge der Pseudo-Elementebene fest, damit sie den Inhalt des Blocks nicht überlappt.

Das Pseudoelement "nimmt" also die gesamte verfügbare Höhe des übergeordneten Blocks ein und gibt ihm bis zum Ende der Seite eine Höhe.

Diese Methode ohne JavaScript ist eine ziemlich einfache und bequeme Möglichkeit, die Blockhöhe bis zum Ende der Seite auf einer Website festzulegen. Es vermeidet das Erstellen zusätzlicher Elemente oder das Ändern der HTML-Struktur.

Zusätzliche Techniken und Empfehlungen zum Erstellen von Blöcken in voller Größe

Wenn Sie Blöcke in voller Größe erstellen, gibt es neben der grundlegenden Methode mit CSS auch zusätzliche Techniken und Richtlinien, die nützlich sein können.

• Verwenden einer festen Position: eine Möglichkeit, Blöcke in voller Größe zu erstellen, besteht darin, den Block mit der CSS-Eigenschaft position: fixed; an eine feste Position zu setzen. Dadurch wird der Block an einer bestimmten Position auf dem Bildschirm haften und die gesamte verfügbare Höhe einnehmen.
• Verwenden der Eigenschaft display: flex: CSS die Eigenschaft display: flex; ermöglicht die Erstellung einer flexiblen und adaptiven Blockstruktur. Wenn Sie diese Eigenschaft auf dem übergeordneten Block verwenden und die Höhe für die untergeordneten Elemente auf 100% festlegen, können Sie den gewünschten Effekt für einen Block in voller Größe erzielen.
• Strukturieren des Codes: wenn Sie Blöcke in voller Größe entwickeln, wird empfohlen, den Code strukturierter und leichter lesbar zu machen. Teilen Sie den Code mithilfe von Kommentaren in Blöcke auf und verwenden Sie Einrückungen, um die Verschachtelung anzuzeigen. Dadurch wird der Code verständlicher und einfacher für die weitere Bearbeitung.
• Testen und Testen: bevor Sie Blöcke in voller Größe auf einem Produktionsserver platzieren, wird empfohlen, dass Sie auf verschiedenen Geräten und Browsern getestet und getestet werden. Stellen Sie sicher, dass die Blöcke bei verschiedenen Bildschirmauflösungen korrekt aussehen und funktionieren, um maximale Kompatibilität zu gewährleisten.