Wie kann ich dafür sorgen, dass zwei schwebende untergeordnete DIVs die gleiche Höhe haben?

Höhenausgleich schwebender untergeordneter DIVs

Problem:

In einem Seitenlayout mit a Wenn ein übergeordnetes DIV zwei schwebende untergeordnete DIVs enthält, vergrößert sich nur die Höhe des ersten untergeordneten DIV, um mit der Höhe des übergeordneten DIV übereinzustimmen, wenn der Inhalt darin zunimmt Es. Das zweite untergeordnete DIV bleibt auf seiner Standardhöhe und hinterlässt ein ungleichmäßiges Erscheinungsbild.

Lösung:

Um sicherzustellen, dass das zweite untergeordnete DIV (.child-right) auf erweitert wird Wenn es die gleiche Höhe wie das übergeordnete Element hat, wenden Sie das folgende CSS auf das übergeordnete Element .parent und das untergeordnete Element .child-right an Elemente:

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

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

Erläuterung:

• Einstellung Überlauf: Ausgeblendet auf dem übergeordneten Element verhindert, dass der Inhalt der untergeordneten DIVs die Grenzen des übergeordneten Elements überschreitet.
• Durch die relative Positionierung des übergeordneten Elements kann das untergeordnete DIV die absolute Positionierung innerhalb seines Elements verwenden Rahmen.
• Die Einstellung width: 100 % für das übergeordnete Element stellt sicher, dass es die gesamte Breite seines Containers einnimmt.
• Für das untergeordnete DIV bewirkt die Einstellung height: 100 %, dass es auf die Höhe erweitert wird seines übergeordneten Elements.
• Breite: 50 % stellt sicher, dass es die Hälfte des übergeordneten Elements einnimmt Breite.
• Absolute Positionierung mit rechts: 0 und oben: 0 platziert das untergeordnete DIV in der oberen rechten Ecke des übergeordneten Elements, ausgerichtet am rechten Rand.

Auf diese Weise Durch die Kombination von CSS-Eigenschaften werden die schwebenden untergeordneten DIVs so erweitert, dass sie der Höhe ihres übergeordneten DIV entsprechen, was zu einer gleichmäßigen Höhenverteilung zwischen beiden untergeordneten DIVs führt.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass zwei schwebende untergeordnete DIVs die gleiche Höhe haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!