Differenz zwischen CSS Height Top 100% gegenüber Höhe automatisch

“Höhe: 100%”Legt die Höhe der untergeordneten Div -Container nach dem des Elternbehälters fest. Dieser Eigenschaftswert legt die Höhe des Kindes genau gleich der im übergeordneten Element definierten Höhe fest. Aber wenn "Höhe: Auto”Wird für ein Element verwendet, setzt es die Höhe seines Kinderelementwerts, anstatt den Wert aus dem übergeordneten Element zu erben.

Dieser Blog unterscheidet zwischen CSS „Höhe: 100%“ und „Höhe: Auto“.

Wie funktioniert „Höhe: 100%“ in HTML?

Das Definieren einer beliebigen Anzahl von Prozentsätzen als Höhe des untergeordneten Elements passt die Höhe entsprechend an. Eine 100% ige Höhe setzt also die Höhe des untergeordneten Elements so, dass es den Bereich des übergeordneten Elements vollständig abdeckt. Zum Beispiel das Festlegen der “Höhe"Des Kinderelements zu"50%”(Höhe: 50%) setzt die Höhe des untergeordneten Elements als die Hälfte seines übergeordneten Elements.

Beispiel: Anwenden Sie die Eigenschaft „Höhe: 100%“ auf ein Bild an
Lassen Sie uns die Anwendung der Höhe verstehen: 100% in einem HTML -Code:

Im obigen Code -Snippet:

• Für das DIV -Element wird der Eigenschaftswert der CSS -Höhe als “definiert"200px”.
• In der DIV gibt es eine "img”Element, das als untergeordnetes Element des obigen Div -Containerelements eingestellt ist. Seine Größe ist auf “100%”(Höhe: 100%). Dies bedeutet, dass die Höhe des Bildes entsprechend dem im übergeordneten Div -Container definierten Pixelwert festgelegt wird, i.e., “200px”.

Dies erzeugt die folgende Ausgabe:

Wenn wir nun den Wert der Höhe der Höhe im übergeordneten Div -Element (zum Beispiel von 200px auf 300 PX) ändern, wird die Größe des Bildes auf “festgelegt.“300px”:

Dies ändert die Bildhöhe auf “300pxUnd das Bild wird so angezeigt:

Wie funktioniert die Eigenschaft „Höhe: Auto“ in HTML?

Der "Höhe: AutoDie Eigenschaft setzt die Höhe des untergeordneten Elements auf den Wert, der in diesem untergeordneten Element definiert ist. Zum Beispiel, wenn es ein übergeordnetes Element gibt, das die Höhe hat “300px"Und es hat ein untergeordnetes Element mit" Höhe: Auto ". In diesem Element (mit „Höhe: automatisch“) haben alle untergeordneten Elemente die Höhe entsprechend der Definition. Insbesondere wird das untergeordnete Element den Wert des übergeordneten Elements nicht erben.

Beispiel: Anwenden Sie die Eigenschaft „Höhe: Auto“ auf ein Bild an
Lassen Sie uns dies mit einem einfachen HTML -Code -Snippet -Beispiel verstehen:

Im obigen Code -Snippet:

• Hier haben wir ein DIV -Containerelement mit dem Style Attribut und der Inline -CSS -Eigenschaft als "hinzugefügt" hinzugefügtHöhe: 300px”.
• Innerhalb des Div -Containerelements befindet sich ein weiterer Div -Container mit der CSS -Style -Eigenschaft als "Auto”.
• Innerhalb des zweiten Divelelements eins “imgElement wird hinzugefügt (Kind des obigen Divelelements). Es hat das Style -Attribut mit der Höhe der Höhe mit dem Wert auf “250px”.
• Dies bedeutet, dass die Höhe des Bildes auf "250px" eingestellt wird, da sein übergeordnetes Element "Höhe: Auto" hat.

Ausgang

Wenn wir nun den Wert der “ändern“Höhe”Eigenschaft des untergeordneten Divs ändert auch die Höhe des Bildes in der Ausgabe entsprechend:

Dadurch wird die Höhe des Bildes als "festgelegt"150px”In der Ausgabe:

Dies fasst den Unterschied zwischen CSS zusammen “Höhe: 100%"Vs"Höhe: Auto”.

Abschluss

Das CSS “Höhe: 100%”Legt die Höhe des Elements genau so fest, wie es in seinem übergeordneten Element definiert ist. Andererseits, wenn das “Höhe: Auto”Wird in einem Element verwendet, es setzt die Höhe seiner untergeordneten Elemente wie in den untergeordneten Elementen und erbt nicht die Höhe des übergeordneten Elements. In diesem Beitrag wurde der Unterschied zwischen CSS „Höhe: 100%“ und „Höhe: Auto“ erörtert.