Webentwickler sind immer bestrebt, Websites zu erstellen, die attraktiv aussehen und effektiv funktionieren. Eine Möglichkeit, dieses Ziel zu erreichen, besteht darin, einen Block zu 100% der Höhe des Elternteils zu erstellen. Mit dieser Technik können Sie die gesamte verfügbare Bildschirmhöhe ausfüllen, was das Erscheinungsbild visuell verbessert und die mobile Anzeige verbessert. In diesem Artikel werden wir uns einige Methoden ansehen, um einen solchen Block mit HTML und CSS zu erstellen.
Der erste Weg ist die Verwendung von Inline-CSS-Stilen. Dazu müssen Sie die Höhe des übergeordneten Elements auf 100% festlegen und die Positionierung angeben. Wenn ein Container beispielsweise auf position: relative festgelegt ist, kann ein geschachtelter Block die Eigenschaft position: absolute angeben und ihn auf top: 0, bottom: 0, left: 0 und right: 0 festlegen. Dadurch wird der Block die gesamte verfügbare Höhe des Elternteils einnehmen. Diese Methode kann jedoch zu Problemen mit der Reaktionsfähigkeit und Skalierbarkeit der Website führen.
Die zweite Methode ist die Verwendung von Grid- oder Flexbox-CSS-Stilen. Mit diesen Technologien können Sie flexible und adaptive Layouts erstellen, ohne dass Sie feste Elementgrößen festlegen müssen. Wenn Sie einen Block mit 100% der Höhe des übergeordneten Elements erstellen möchten, wenden Sie die Einstellung der Eigenschaft height: 100vh auf den Container an und definieren Sie die flexible Größe der inneren Elemente mit grid-template-rows oder flex-grow.
Was ist ein Block bei 100% der Höhe eines Elternteils?
Ein solcher Block kann nützlich sein, wenn Sie ein Hintergrundelement erstellen möchten, das unabhängig von der Entfernung zwischen den übergeordneten Elementen oder der Höhe ihres Inhalts die gesamte Bildschirmhöhe einnimmt. Dies kann beispielsweise nützlich sein, wenn Sie eine Vollbild-Website, einen Schieberegler oder einen Abschnitt mit einem Hintergrundbild erstellen.
Sie können verschiedene Methoden verwenden, um einen Block mit 100% der Höhe des Elternteils zu erstellen, z. B. die Verwendung der CSS-Eigenschaft height: 100% oder die Verwendung von Flexboxen, Grids und Positionierung. Jede dieser Methoden hat ihre eigenen Merkmale und eignet sich für verschiedene Situationen.
Beachten Sie, dass ein Block mit 100% der Höhe des übergeordneten Elements nur implementiert werden kann, wenn die Höhe des übergeordneten Elements explizit festgelegt oder festgelegt ist height: 100%. Andernfalls belegt der Block automatisch nur die verfügbare vertikale Fläche innerhalb des Inhalts des Elternteils.
Zusammenfassend ist ein Block mit 100% der Höhe eines Elternteils ein Element einer Webseite, das die gesamte vertikale Fläche seines Elternteils einnimmt. Es kann nützlich sein, um Hintergrundelemente oder Vollbildabschnitte zu erstellen. Abhängig von den Anforderungen und der Struktur der Webseite können verschiedene Methoden verwendet werden, um sie zu implementieren.
Methoden zum Erstellen eines Blocks bei 100% der Höhe des Elternteils
Methode # 1: Verwenden der berechneten Höhe.
Eine Möglichkeit, einen Block zu erstellen, der 100% der Höhe seines Elternteils einnimmt, besteht darin, die CSS-Eigenschaft zu verwenden height: 100%;. Damit dies funktioniert, muss das übergeordnete Element jedoch eine festgelegte Höhe haben (z. B. in Pixeln).
Methode # 2: Verwenden der absoluten Positionierung.
Eine andere Möglichkeit, Blöcke mit 100% der Höhe des Elternteils zu erstellen, besteht darin, die absolute Positionierung zu verwenden. Um dies zu tun, legen Sie die Eigenschaft für das übergeordnete Element fest position: relative; und für das untergeordnete Element - position: absolute; height: 100%;. Daher nimmt das untergeordnete Element 100% der Höhe des übergeordneten Elements ein.
Methode # 3: Verwenden von Flexbox.
Flexbox ist eine neue CSS-Technologie, die es einfach macht, adaptive Layouts zu erstellen. Um mit Flexbox einen Block zu 100% der Höhe des übergeordneten Elements zu erstellen, legen Sie die Eigenschaft des übergeordneten Elements fest display: flex; und dem untergeordneten Element - flex: 1;. Dadurch wird das untergeordnete Element auf die gesamte verfügbare Höhe des übergeordneten Elements gestreckt.
Methode # 4: Verwenden von Grid.
Grid ist eine weitere neue CSS-Technologie, mit der Sie komplexe Layouts mit einem Raster erstellen können. Um einen Block zu 100% der Höhe des übergeordneten Elements mit Grid zu erstellen, legen Sie die Eigenschaft des übergeordneten Elements fest display: grid; und für das untergeordnete Element festlegen grid-row: 1;. Dadurch wird das untergeordnete Element auf die gesamte verfügbare Höhe des übergeordneten Elements gestreckt.
Verwenden der CSS-Eigenschaft "height: 100%"
Die CSS-Eigenschaft "height: 100%" wird häufig verwendet, um einen Block mit 100% der Höhe des Elternteils zu erstellen. Dies ist besonders nützlich, wenn Sie einen Block erstellen möchten, der die gesamte verfügbare Höhe des Browserfensters oder des übergeordneten Elements einnimmt.
Um diese Eigenschaft auf ein Element anzuwenden, legen Sie den Wert einfach auf "100%" fest. Zum Beispiel:
.parent .child
In diesem Fall nimmt ein Block mit der Klasse "child" die gesamte Höhe des Blocks mit der Klasse "parent" ein, da die Eigenschaft "height" auf "100%" gesetzt ist. Dies funktioniert sowohl für die feste Höhe des Elternteils als auch für die dynamische Höhe.
Um auch "height: 100%" auf einem Block zu verwenden, muss sein Elternteil eine Bedeutung für die Eigenschaft "height" haben. Wenn das übergeordnete Element keine explizite Höhe aufweist, wird die Eigenschaft "height: 100%" für das untergeordnete Element ignoriert.
Die Verwendung der CSS-Eigenschaft "height: 100%" ist sehr praktisch, wenn Sie adaptive Webseiten erstellen, bei denen die Blöcke die gesamte verfügbare Bildschirmhöhe des Benutzers einnehmen müssen. Es kann auch nützlich sein, wenn Sie Schieberegler oder modale Fenster erstellen, die die gesamte Höhe des sichtbaren Bereichs einnehmen müssen.
Es ist wichtig zu beachten, dass die Eigenschaft "height: 100%" nur innerhalb eines Blocks mit einer bekannten oder explizit angegebenen Höhe funktioniert. Wenn Sie einen Block erstellen möchten, der den gesamten sichtbaren Bereich füllt, ohne an das übergeordnete Element gebunden zu sein, sollten Sie andere Methoden verwenden, z. B. negative Werte für die Margin-Eigenschaft oder die Verwendung einer festen Position in Verbindung mit der Top: 0- und bottom: 0-Eigenschaft.
Verwenden der CSS-Eigenschaft "flexbox"
Mit Flexbox können Sie die Anordnung von Elementen innerhalb eines Containers flexibel steuern, und eine seiner nützlichen Eigenschaften ist die Möglichkeit, die Höhe eines untergeordneten Elements so festzulegen, dass es die gesamte verfügbare Höhe des übergeordneten Elements einnimmt.
Um mit Flexbox einen Block zu 100% der Höhe des Elternteils zu erstellen, müssen Sie:
1. Legen Sie die Eigenschaft "display: flex;" für das übergeordnete Element fest.
Diese Eigenschaft gibt an, dass es sich bei dem Block um einen Flexcontainer handelt.
2. Legen Sie die Eigenschaften "flex-grow: 1;" und "flex-shrink: 0;" für das untergeordnete Element fest
Eigenschaft "flex-grow: 1;" gibt an, dass sich das untergeordnete Element auf die gesamte verfügbare Höhe des übergeordneten Elements ausdehnen muss, und die Eigenschaft 'flex-shrink: 0;' verhindert, dass es komprimiert wird.
Hier ist ein Beispiel für CSS-Code, der veranschaulicht, wie die Flexbox-Eigenschaft verwendet wird, um einen Block mit 100% der Höhe eines Elternteils zu erstellen:
.container .childJetzt nimmt der Block mit der Klasse "child" die gesamte verfügbare Höhe des Elternteils mit der Klasse "container" ein.
Mit der CSS-Eigenschaft "flexbox" können Sie flexible und adaptive Layouts erstellen und die Größe und Position der Elemente auf der Seite steuern.
Verwenden der CSS-Eigenschaft "Position: absolute"
CSS-Eigenschaft "position: absolute" ermöglicht es uns, einem Element die absolute Positionierung innerhalb seines übergeordneten Elements festzulegen. Wenn diese Eigenschaft angewendet wird, wird das Element aus dem Dokumentfluss entfernt und entsprechend seinen Koordinaten positioniert, die durch die Eigenschaften "top", "right", "bottom" und "left" angegeben werden.
Eine der Anwendungen der Eigenschaft "position: absolute" ist, einen Block bei 100% der Höhe des Elternteils zu erstellen. Um dies zu tun, müssen Sie zuerst die Höhe des übergeordneten Elements mithilfe der Eigenschaft "height: 100%" festlegen. Dann werden die Eigenschaft "position: absolute" und die folgenden Eigenschaften für das untergeordnete Element angewendet, das die gesamte Höhe des übergeordneten Elements einnehmen soll:
- "top: 0" - Legt den Einzug vom oberen Rand des übergeordneten Elements zum oberen Rand des untergeordneten Elements auf 0 fest;
- "left: 0" - Legt den Einzug vom linken Rand des übergeordneten Elements zum linken Rand des untergeordneten Elements auf 0 fest;
- "right: 0" - Legt den Einzug vom rechten Rand des übergeordneten Elements zum rechten Rand des untergeordneten Elements auf 0 fest;
- "bottom: 0" - Legt den Einzug vom unteren Rand des übergeordneten Elements zum unteren Rand des untergeordneten Elements auf 0 fest.
Der Block mit den angegebenen Eigenschaften nimmt also die gesamte verfügbare Höhe des übergeordneten Elements ein, und seine Grenzen stimmen mit den Grenzen des übergeordneten Elements überein. Diese Lösung ist besonders nützlich, wenn Sie adaptive und skalierbare Layouts erstellen, bei denen es erforderlich ist, dass der Block den gesamten verfügbaren Platz vertikal einnimmt.
Lösen von Blockproblemen bei 100% der Höhe des Elternteils
Es besteht oft die Notwendigkeit, einen Block zu erstellen, der 100% der Höhe seines übergeordneten Elements einnimmt. Dies kann nützlich sein, wenn Sie eine Hintergrundfüllung oder einen Container für andere Elemente erstellen möchten, die den gesamten verfügbaren vertikalen Bereich belegen.
Die standardmäßigen CSS-Methoden ermöglichen jedoch nicht immer das gewünschte Ergebnis. Wenn Sie beispielsweise die Eigenschaft height verwenden: 100% wird der Block nur auf die Höhe seines Elternteils und nicht auf die gesamte Länge der Seite gestreckt.
Es gibt mehrere Möglichkeiten, dieses Problem zu lösen. Eine davon ist die Verwendung einer absoluten Positionierung in Verbindung mit einer Höhe von 100%:
| ``` CSS | ``` HTML |
| ``` .parent | ``` |
| ``` position: relative; | ``` |
| ``` height: 100%; | ``` |
| ``` > | ``` .child |
| ``` .child | ``` position: absolute; |
| ``` top: 0; | ``` left: 0; |
| ``` height: 100%; | ``` width: 100%; |
| ``` > | ``` |
In diesem Beispiel muss das übergeordnete Element eine relative Positionierung und eine angegebene Höhe von 100% aufweisen. Innerhalb des übergeordneten Elements wird ein untergeordnetes Element erstellt, das eine absolute Positionierung aufweist und ebenfalls eine Höhe von 100% aufweist.
Bei diesem Ansatz dehnt sich das Blockkind auf die gesamte Höhe seines Elternteils aus, wodurch ein Effekt erzeugt wird, wenn der gesamte Block 100% der Seitenhöhe einnimmt.
Beachten Sie jedoch, dass bei Verwendung der absoluten Positionierung das untergeordnete Element den Stream verlässt, was sich auf die Platzierung anderer Elemente auf der Seite auswirken kann. Beachten Sie außerdem, dass das übergeordnete Element eine ausreichende Höhe haben muss, damit das untergeordnete Element 100% dehnen kann.
