Wenn Sie eine Webseite erstellen, ist es manchmal erforderlich, dass die Höhe der Webseite den gesamten Bildschirm einnimmt. Dies kann zum Erstellen von Landings, Deckblättern und anderen Elementen mit festem Hintergrund oder Vollbildbildern nützlich sein. In diesem Artikel werden wir uns ansehen, wie Sie die Höhe mithilfe von CSS im Vollbildmodus erstellen und anpassen können.
Es gibt mehrere Möglichkeiten, diesen Effekt zu erzielen, aber am einfachsten ist es, relative Maßeinheiten wie Prozentsätze oder vh zu verwenden (viewport height ist die Höhe des Ansichtsbereichs).
Zuerst müssen Sie die Höhe für alle übergeordneten Elemente vom HTML-Tag bis zum Zielelement festlegen, sodass sie eine Höhe von 100% aufweisen. Zum Beispiel, um die Höhe des gesamten Bildschirms für ein Element anzupassen div Sie müssen die Höhe für alle übergeordneten Elemente festlegen:
html, body, #wrapper
Dann können wir die Höhe unseres Zielelements mit Prozentsätzen oder vh auf 100% oder den gewünschten Bildschirmanteil einstellen. Zum Beispiel, um die Höhe des gesamten Bildschirms für ein Element anzupassen div Sie können den folgenden CSS-Code verwenden:
Jetzt ist unser Element div wird die gesamte verfügbare Bildschirmhöhe einnehmen.
Höhenanpassungsansichten im Vollbildmodus
Es gibt mehrere Möglichkeiten, die Höhe eines Elements mithilfe von CSS auf den gesamten Bildschirm anzupassen. Betrachten wir einige von ihnen:
1. Höhe als Prozentsatz verwenden:
Eine der einfachsten Methoden besteht darin, die Höhe eines Elements als Prozentsatz festzulegen. Beispielsweise können Sie die Höhe auf 100% festlegen, was bedeutet, dass das Element den gesamten verfügbaren vertikalen Bereich des Bildschirms belegt. Diese Methode ist einfach und relativ zuverlässig, kann jedoch Probleme mit Elementen verursachen, die innerhalb eines solchen Elements verschachtelt sind.
2. Verwenden der Höhe in der Last:
Eine andere Möglichkeit besteht darin, relative Maßeinheiten wie vw (viewport-width) und vh (viewport-height) zu verwenden. Wenn Sie beispielsweise die Höhe eines Elements auf 100vh setzen, bedeutet dies, dass das Element 100% der Höhe des sichtbaren Bereichs des Browserfensters einnimmt. Diese Methode ist flexibler und ermöglicht eine genauere Kontrolle der Höhe eines Elements auf verschiedenen Geräten und Bildschirmen.
3. Verwenden einer festen Position:
Eine andere Möglichkeit, die Höhe auf den gesamten Bildschirm einzustellen, besteht darin, eine feste Position des Elements zu verwenden. Sie können beispielsweise die Positionierung eines Elements auf absolute oder fixed festlegen und die Top- und bottom-Eigenschaft auf 0 festlegen. Dadurch wird das Element den gesamten verfügbaren vertikalen Bereich des Bildschirms einnehmen. Diese Methode ist jedoch nicht immer geeignet, da das Element das Scrollen der Seite verhindern kann.
4. Flexbox verwenden:
Flexbox ist ein CSS-Tool, mit dem Sie die Anordnung von Elementen in einem Container einfach anpassen können. Mit der Flex-Eigenschaft können Sie die Höhe eines Elements ganz einfach auf den gesamten Bildschirm anpassen. Sie können beispielsweise die flex: 1-Eigenschaft verwenden, um sicherzustellen, dass das Element den gesamten verfügbaren vertikalen Bereich des Containers einnimmt.
5. Verwenden von Grid:
Mit dem Aufkommen von Grid in CSS ist es noch einfacher geworden, benutzerdefinierte Layouts zu erstellen. Mit den Eigenschaften grid-template-rows und grid-template-areas können Sie flexible und anpassungsfähige Strukturen erstellen, einschließlich der Elemente mit Vollbildhöhe. Sie können beispielsweise die Zeilenhöhe auf 1fr festlegen, sodass sie den gesamten verfügbaren vertikalen Bereich des Containers einnimmt.
Dies sind nur einige der Möglichkeiten, die Höhe mit CSS auf den gesamten Bildschirm anzupassen. Die Auswahl der Methode hängt von der spezifischen Aufgabe und den Designanforderungen ab. Verwenden Sie die Methode, die Ihren Bedürfnissen am besten entspricht.
Verwenden der Eigenschaft height: 100vh
Height-Eigenschaft: mit 100vh können Sie die Höhe eines Elements auf 100% der Höhe des Browserfensters einstellen. Dies ist sehr nützlich, wenn Sie einen Block erstellen möchten, der den gesamten verfügbaren vertikalen Bereich des Bildschirms belegen muss.
Sie können beispielsweise die Eigenschaft height verwenden: 100vh, um einen Vollbild-Schieberegler zu erstellen oder einen Container zu erstellen, der die gesamte Bildschirmhöhe ausfüllt und das Hintergrundbild anzeigt.
Wenn Sie einen Block erstellen möchten, der den gesamten verfügbaren vertikalen Bereich des Bildschirms einnimmt, können Sie den folgenden Code verwenden:
Этот блок займет всю вертикальную область экрана.
Sie können Begleitstile zu einer CSS-Datei hinzufügen:
.fullscreen Der Block wird nun den gesamten vertikalen Bereich des Bildschirms einnehmen, unabhängig von der Größe des Browserfensters.
Die Eigenschaft height: 100vh ist besonders nützlich bei der Verwendung von Medienabfragen, wenn Sie ein responsives Design für verschiedene Bildschirmgrößen erstellen möchten.
Es ist wichtig zu beachten, dass bei der Verwendung von height: 100vh ein kleiner vertikaler Bildlauf möglich ist, da der Bereich die gesamte Höhe des Browsers einnimmt, einschließlich der Bildlaufleiste. Um dieses Scrollen zu vermeiden, können Sie overflow: hidden zum übergeordneten Block hinzufügen.
Zuweisen einer Mindesthöhe zu einem Behälter mit min-height: 100%
Es ist oft notwendig, einen Container so hoch wie möglich zu setzen, dass er den gesamten verfügbaren Bereich des Bildschirms einnimmt, auch wenn kein Inhalt vorhanden ist. Um diesen Effekt zu erzielen, können Sie die Eigenschaft min-height verwenden und den Wert auf 100% festlegen.
Im folgenden Beispielcode wird die Verwendung der min-height-Eigenschaft veranschaulicht :
.containerПример содержимого контейнера.
In diesem Beispiel haben wir eine Klasse erstellt .container und haben die Eigenschaft min-height: 100% darauf angewendet. Dann haben wir die Hintergrundfarbe und den Einzug hinzugefügt, damit der Container sichtbar ist.
Beachten Sie, dass die Eigenschaft min-height nur funktioniert, wenn das übergeordnete Element (normalerweise ) eine feste Höhe aufweist. Wenn dies nicht der Fall ist, nimmt der Container auch den gesamten verfügbaren Bereich des Bildschirms ein.
Mit der Eigenschaft min-height: 100% können Sie daher ganz einfach einen Container erstellen, der unabhängig von der Menge des Inhalts die gesamte Bildschirmhöhe einnimmt. Dies ist nützlich, wenn Sie eine Vorlage oder ein Layout erstellen müssen, das auf verschiedenen Geräten und Bildschirmauflösungen gleich aussehen sollte.
