Wie mache ich body mit CSS auf Vollbild

Wenn wir eine Webseite erstellen, besteht eine der wichtigsten Aufgaben darin, die Struktur der Seite und ihr Aussehen zu erstellen. Webseiten bestehen normalerweise aus mehreren Abschnitten, z. B. einem Titel, Hauptinhalt und einem Fußboden. Und natürlich möchten wir, dass alle Seitenelemente gut sichtbar sind und die gesamte verfügbare Bildschirmfläche einnehmen.

Eine Möglichkeit, dies zu tun, besteht darin, CSS zu verwenden, um die Größe der Seitenelemente festzulegen. Das Hauptelement, das wir mit allem verfügbaren Platz füllen möchten, ist body das ist der Hauptinhalt einer Webseite. Wir können die Höhe und Breite dieses Elements auf 100% einstellen, damit es den gesamten Bildschirm ausfüllt.

Dazu können wir den folgenden Code verwenden:

body

Dieser Code in CSS legt die Höhe und Breite fest body bei 100% und setzt auch die Einrückung und Einrückung innerhalb des Elements auf 0. Auf diese Weise, body belegt den gesamten verfügbaren Platz auf dem Bildschirm, ohne Einzug oder Einzug.

Stretching body auf den gesamten CSS-Bildschirm

Sie können den folgenden Code verwenden, um das body-Element mithilfe von CSS auf den gesamten Bildschirm zu strecken:

body margin: 0;
padding: 0;
height: 100vh;
>

In diesem Code setzen wir Nullwerte für Einrückungen und Body-Felder, um unnötigen Platz zu vermeiden. Verwenden Sie dann die Eigenschaft height und die Maßeinheit vh (Höhe des Ansichtsfensters), um die Höhe des body auf hundert Prozent der Höhe des Browserfensters einzustellen.

Mit diesem Ansatz können Sie sicherstellen, dass das body-Element unabhängig von seinem Inhalt die gesamte verfügbare Bildschirmhöhe einnimmt.

Technik ohne Verwendung von Frameworks

Um body im Vollbildmodus zu erstellen, ohne Frameworks zu verwenden, können Sie einfache CSS-Regeln verwenden.

Zuerst müssen Sie die Größe der Elemente auf der Seite als Prozentsatz festlegen. Sie können beispielsweise die Breite und Höhe des Body-Elements auf 100 festlegen%:

body

Zweitens müssen Sie den Einzug und die Grenzen der Elemente auf der Seite entfernen. Dazu können Sie die Eigenschaft margin und padding mit dem Wert 0 verwenden:

body

Dadurch wird die Größe des body-Elements auf 100% festgelegt und der Einzug und die Grenzen entfernt, um sicherzustellen, dass der body die gesamte verfügbare Fläche des Bildschirms einnimmt.

Verwenden der Höhen- und Breiteneigenschaften von 100%

Sie können die Höhen- und Breiteneigenschaften von 100% verwenden, um ein Element im Vollbildmodus anzuzeigen. Dadurch kann das Element den gesamten verfügbaren Bereich auf der Seite einnehmen.

Текст

Das Element nimmt nun den gesamten verfügbaren Bereich auf der Seite ein. Dies kann nützlich sein, wenn Sie adaptive oder Vollbildschnittstellen erstellen.

Anwendung der absoluten Positionierung

Durch die Anwendung der absoluten Positionierung können Sie verschiedene Webdesigneffekte erstellen, z. B. das Erstellen von Popup-Fenstern, Menüs, Eingabeaufforderungen usw.

Um die absolute Positionierung anzuwenden, müssen Sie den Wert der position-Eigenschaft für das Element mit dem Wert absolute angeben. Anschließend können Sie die Eigenschaften left , right , top und bottom verwenden, um die Position des Elements festzulegen.

Der Vorteil der absoluten Positionierung besteht darin, dass das Element unabhängig von den anderen Elementen überall auf der Webseite genau platziert werden kann. Bei der Verwendung dieser Methode sollten Sie jedoch vorsichtig sein, da das Element andere Elemente überlappen oder bildlauffähige Bereiche einer Webseite erstellen kann.

Es ist wichtig zu beachten, dass das Element bei Verwendung der absoluten Positionierung keinen Platz im normalen Fluss einnimmt, sodass andere Elemente auf der Webseite "herunterfallen" oder "eingrenzen" können. Um dies zu vermeiden, können Sie die z-index-Eigenschaft verwenden, um die Überlappungsreihenfolge der Elemente festzulegen.

Die Anwendung der absoluten Positionierung ist daher ein leistungsfähiges Werkzeug, um interaktive und einzigartige Webdesigns zu erstellen, Elemente an den richtigen Stellen zu platzieren und Ihren Seiten Dynamik und Wirkung zu verleihen.

Verwenden der Flexbox zum Dehnen

1. display: flex; - diese Eigenschaft wird auf den Container angewendet, den Sie über den gesamten Bildschirm strecken möchten. Sie legt den Typ der Flexbox für den Container fest, sodass Sie alle Funktionen des Containers nutzen können.
2. flex-direction: column; - Diese Eigenschaft gibt die Richtung an, in der sich die Elemente des Containers befinden. In diesem Fall geben wir Folgendes an column, um die Elemente vertikal zu positionieren.
3. justify-content: center; - Diese Eigenschaft bestimmt die horizontale Ausrichtung der Containerelemente. Angegebener center, um Elemente in der Mitte des Bildschirms zu platzieren.
4. align-items: center; - Diese Eigenschaft bestimmt die vertikale Ausrichtung der Containerelemente. Wir weisen auch darauf hin center, um Elemente in der Mitte des Bildschirms zu platzieren.
5. height: 100vh; - Diese Eigenschaft legt die Höhe des Containers im Stream fest. Angegebener 100vh damit der Container den gesamten verfügbaren vertikalen Bereich des Bildschirms einnimmt.

Das Anwenden dieser Eigenschaften ermöglicht das Dehnen body vollbild, wodurch ein Effekt entsteht, den verfügbaren Ansichtsbereich zu füllen.

Dehnen des body mit einem Grid-Netz

Zunächst müssen Sie die Stile für den Container festlegen, der alle Seitenelemente enthält. Sie können einen Container mit der container-Klasse erstellen und die folgenden CSS-Stile darauf anwenden:

In diesem Beispiel verwenden wir die display-Eigenschaft mit dem Grid-Wert, mit der Sie ein Grid-Raster erstellen können. Außerdem legen wir die Mindesthöhe des Containers mit der Eigenschaft min-height fest und geben den Wert auf 100vh an. Dies bedeutet, dass der Container 100% der Höhe des sichtbaren Bereichs des Bildschirms einnimmt.

Danach müssen Sie die Anzahl und Breite der Spalten und die Anzahl und Höhe der Zeilen im Raster definieren. Sie können die folgenden CSS-Stile dafür verwenden:

In diesem Beispiel erstellen wir ein Grid-Raster mit 3 Spalten und 2 Zeilen, indem wir die Eigenschaften grid-template-columns und grid-template-rows verwenden. Der Wert repeat(3, 1fr) gibt an, dass jede Spalte einen gleichen Bruchteil der verfügbaren Breite einnimmt, und repeat(2, 1fr) gibt an, dass jede Zeile einen gleichen Bruchteil der verfügbaren Höhe einnimmt.

Nachdem Sie ein Grid-Raster festgelegt haben, können Sie den Elementen des Grid-Rasters Seiteninhalte hinzufügen, indem Sie die entsprechenden Stile angeben.

Wenn Sie also ein Grid-Raster verwenden und die entsprechenden Werte für die Breite und Höhe der Spalten und Reihen angeben, können Sie eine Body-Dehnung auf den gesamten Bildschirm implementieren.

Schwimmende Elemente zum Dehnen des body

Sie können schwimmende Elemente verwenden, um den body auf die gesamte Bildschirmhöhe zu bringen.

Erstellen Sie dazu einen Container mit fester Höhe und wenden Sie eine Eigenschaft darauf an overflow: hidden;.

Erstellen Sie dann in diesem Container schwimmende Elemente, die den gesamten verfügbaren Platz einnehmen.

Sie können die Eigenschaft verwenden, um vertikal zu dehnen height: 100%;.

Auf diese Weise werden die Elemente in der Höhe des Containers gestreckt und belegen den gesamten verfügbaren Bereich.

Sie können die Eigenschaft zum horizontalen Strecken verwenden width: 100%;.

Auf diese Weise werden die Elemente über die Breite des Containers gestreckt und belegen den gesamten verfügbaren Bereich.

Die Verwendung von schwimmenden Elementen ermöglicht eine vollständige Dehnung des body in beide Richtungen und erzeugt einen Effekt, in dem Blöcke auf den Bildschirm fallen.

Anmerkung: Um die Eigenschaft height: 100% zu verwenden, müssen Sie die Höhe für alle übergeordneten Elemente festlegen, einschließlich html und body.

Anwendung von VH- und Vw-Maßeinheiten

Die Einheiten vh und vw werden in CSS verwendet, um die Größe von Elementen basierend auf der Höhe und Breite des sichtbaren Bereichs des Browserfensters festzulegen.

Die vh-Maßeinheit (Viewport height) stellt einen Prozentanteil der Höhe des sichtbaren Browserfensters dar. Ein Wert von 100vh bedeutet beispielsweise, dass das Element die gesamte Höhe des sichtbaren Bereichs des Fensters einnimmt

Die Vw-Maßeinheit (Viewport width) funktioniert ähnlich, bezieht sich jedoch auf die Breite des sichtbaren Fensters. Der Wert 100vw bedeutet, dass das Element die gesamte Breite des sichtbaren Bereichs des Fensters einnimmt.

Mit vh- und vw-Maßeinheiten können Sie ansprechende und ansprechende Webseiten erstellen, die sich an die Bildschirmgröße des Benutzers anpassen. Dies ist besonders nützlich, wenn Sie mobile Anwendungen und adaptive Versionen von Websites entwickeln.

.header .section

In diesem Beispiel nimmt ein Block mit der Klasse "header" die gesamte Höhe und Breite des sichtbaren Bereichs des Browserfensters ein, während ein Block mit der Klasse "section" die Hälfte der Höhe und Breite des sichtbaren Bereichs des Fensters einnimmt.

Die Verwendung von vh- und vw-Maßeinheiten ermöglicht daher die einfache und flexible Dimensionierung von Elementen und die Erstellung adaptiver Seiten auf allen Geräten.

Verwenden von JavaScript zum adaptiven Dehnen

Erstellen Sie zunächst die grundlegende Struktur der HTML-Datei:

Fügen Sie dann CSS-Stile hinzu, die die Höhe und Breite des Body-Containers auf den gesamten Bildschirm einstellen:

Fügen Sie schließlich den folgenden JavaScript-Code hinzu, der den Body-Container auf den gesamten Bildschirm ausdehnt:

var container = document.getElementById("container");

var height = window.innerHeight;

var width = window.innerWidth;

container.style.height = height + "px";

container.style.width = width + "px";

Wenn die Seite geladen wird, ändert die JavaScript-Funktion resizeContainer() die Größe des Body-Containers in die Größe des Browserfensters. Und wenn Sie die Größe des Browserfensters ändern, wird die Funktion ebenfalls aktiviert, um die Dehnbarkeit beizubehalten.

Ihr Body-Container wird sich nun unabhängig von der Auflösung des Geräts oder der Größe des Browserfensters auf den gesamten Bildschirm ausdehnen.

Beispiele und Demonstrationen von Body Stretching

Im Folgenden finden Sie eine Tabelle mit Codebeispielen, die Ihnen helfen, besser zu verstehen, wie es funktioniert.

Mit diesen Beispielen können Sie eine Body-Dehnung auf den gesamten Bildschirm erzielen und ein interessantes Design für Ihre Website erstellen.