Wie lässt sich ein schwebendes untergeordnetes Div auf die Höhe seines übergeordneten Elements erweitern?

Erweitern der Höhe des untergeordneten Teils auf die Höhe des übergeordneten Elements

In einem Weblayout, in dem übergeordnete und untergeordnete Elemente nebeneinander positioniert sind, ist dies häufig erforderlich um sicherzustellen, dass ihre Höhen gleich sind. Dadurch soll verhindert werden, dass das übergeordnete Element aufgrund des Inhalts im untergeordneten Element gestreckt oder gestaucht erscheint.

Problem:

Sie haben ein übergeordnetes Div mit zwei schwebenden untergeordneten Divs (Kind-links und Kind-rechts). Wenn der Inhalt von child-left zunimmt, wird die Höhe des übergeordneten Divs entsprechend angepasst. Die Höhe von child-right bleibt jedoch unverändert.

Lösung:

Um die Höhe von child-right der Höhe seines übergeordneten Elements anzupassen, wenden Sie das folgende CSS an Stile:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-left {
    float: left;
}

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

• .parent:

  • overflow: versteckt: Verhindert, dass der Inhalt des übergeordneten Div über seine Grenzen hinaus überläuft.
  • position: relative: Legt das übergeordnete Div als relativen Positionierungskontext für sein untergeordnetes Element fest divs.

• .child-left:

  • float: left: Positioniert child-left nach links innerhalb der Elternteil.

• .child-right:

  • Hintergrund: grün: Optionale Farbe zu Demonstrationszwecken.
  • Höhe: 100 %: Stellt die Höhe des untergeordneten Rechts so ein, dass sie mit dem übergeordneten Recht übereinstimmt.
  • Breite: 50 %: Gibt die Breite des untergeordneten Rechts als 50 % des übergeordneten Elements an.
  • Position: absolut: Positioniert das untergeordnete Recht absolut innerhalb des übergeordneten Elements.
  • rechts: 0: Richtet das untergeordnete Recht rechts aus rechts vom übergeordneten Element.
  • top: 0: Richtet das untergeordnete Element rechts oben am aus übergeordnetes Element.

Durch die Kombination dieser Stile können Sie die gewünschte Höhenerweiterung von child-right erreichen, um sie an das übergeordnete Element anzupassen, unabhängig vom Inhalt von child-left.

Das obige ist der detaillierte Inhalt vonWie lässt sich ein schwebendes untergeordnetes Div auf die Höhe seines übergeordneten Elements erweitern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!