Warum funktioniert die Höhe nicht zu 100%, um Divs auf die Bildschirmhöhe zu erweitern??

In HTML kann der Benutzer ein oder mehrere Container mit Hilfe von “erstellen“" oder "Elemente. Darüber hinaus ermöglicht CSS seinem Benutzer, die Breite und Höhe des Containers gemäß ihren Bedürfnissen zu ändern. Die Höhe: 100% funktioniert jedoch nicht, da sie vom übergeordneten Element abhängt. Stellen Sie zuerst die Höhe der übergeordneten Elemente ein und setzen Sie dann die Div -Höhe.

Diese Beschreibung erklärt die Höhe: 100% für die Erweiterung der Divs auf die Höhe des Vollbildes.

Warum keine Höhe: 100% arbeiten, um Divs auf die Bildschirmhöhe zu erweitern?

Wenn Benutzer die Stilregel verwenden möchten “Höhe: 100%Um einen Div -Container zur vollen Höhe des Bildschirms zu machen, funktioniert er einfach nicht, da der Prozentsatz (%) eine relative Einheit ist, was bedeutet, dass die endgültige Höhe von der Höhe des übergeordneten Elements abhängt.

Um eine Prozentzahl für die Höhe zu verwenden, muss auch die Höhe des Elternteils bestimmt werden. Die einzige Option ist das Eltern-/Stammelement “”, Der eine Höhe im Prozentsatz ermöglicht, um die Divs auf den Vollbild zu erweitern.

So setzen Sie Höhe: 100% für die Erweiterung von Divs auf den Vollbild?

Setzen “Höhe: 100%”Arbeitet für die Erweiterung der Divs auf die Bildschirmhöhe und probieren Sie die angegebenen Anweisungen aus.

Schritt 1: Erstellen Sie einen Div -Container

Erstellen Sie zunächst einen DIV -Behälter mit Hilfe des “Element und fügen Sie ein Klassenattribut ein, um den bestimmten Container mit Hilfe des Klassennamens zu identifizieren. Dann einen Text in das Tag einbetten:

LinuxHint Ltd UK

Es ist ersichtlich, dass der Div -Container erfolgreich erstellt wurde:

Schritt 2: Setzen Sie „Höhe: 100%

Um die DIV auf die Bildschirmhöhe zu erweitern, greifen Sie direkt mit seinem Namen auf die HTML -Seite und den Körper zu, und “html", Und "Körper”. Greifen Sie außerdem auf den Div -Container zu, indem Sie den Klassennamen mit DOT -Selektor als “verwenden.vollständige Höhe”:

HTML, Körper, .vollständige Höhe
Höhe: 100%;
min-hohe: 100% !wichtig;

Hier:

• “HöheDie Eigenschaft legt die Höhe des aufgerufenen Elements fest. In diesem Fall wird die Höhe als “festgelegt“100%“.
• Dann setzen Sie die “min-hohe" als "100%Und wenden Sie die wichtige Regel auf diese Eigenschaft an.
• Der "!wichtigDie Regel wird verwendet, um eine Eigenschaft oder einen Wert als Normalwert mehr Bedeutung zu setzen.

Schritt 3: Stylen Sie den Div -Container "Div"

Verwendete den Klassennamen und den Selektor als “.vollständige Höhe”Für den Zugriff auf den Div-Container und die unterbezeichneten CSS-Eigenschaften anwenden:

.vollständige Höhe
Breite: 500px;
Hintergrund: RGB (154, 208, 240);
Text-Align: Mitte;
fette Schriftart;
Schriftstil: kursiv;

Nach dem angegebenen Code -Snippet:

• “BreiteWird verwendet, um die Breite des Elements anzugeben.
• “Hintergrund”Bestimmt die Farbe der Rückseite des Elements.
• “TextausrichtungDie Eigenschaft wird verwendet, um die Ausrichtung des Textes festzulegen.
• “SchriftartWird verwendet, um die bestimmte Schriftart des Textes anzugeben.
• “Schriftstil”Bestimmt den Stil des Textes. Dazu wird der Wert dieser Eigenschaft als "festgelegt" festgelegt "kursiv”.

Ausgang

Es geht darum, die Höhe zu setzen.

Abschluss

Um eine Prozentzahl für die Höhe zu verwenden, muss auch die Höhe des Elternteils bestimmt werden. Die einzige Ausnahme ist das Stammelement “”, Der eine prozentuale Höhe ermöglicht, um die Divs auf den Vollbild zu erweitern. Greifen Sie dazu auf die HTML-, Körper- und Divelelemente zu und setzen Sie die “Höhe" als "100%" Und "min-hohe" Auch "100%”. In diesem Tutorial wurde über die Höhe erklärt: 100% arbeitet daran, die DIV auf den Vollbild zu erweitern.