Wie kann ein Div ohne absolute Positionierung die verbleibende Höhe des übergeordneten Elements einnehmen?

Div die verbleibende übergeordnete Höhe ohne absolute Positionierung belegen lassen

In HTML/CSS stößt man oft auf ein Szenario, in dem ein untergeordnetes Div besetzt werden muss die verbleibende Höhe seines übergeordneten Containers, ohne explizit eine bestimmte Höhe festzulegen. Schauen wir uns das Problem und seine möglichen Lösungen genauer an.

Betrachten Sie den folgenden HTML/CSS-Code:

<div>

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

Hier sollte das „down“-Div den Leerraum unter dem „ up" div.

Lösung

Es gibt mehrere Methoden, um erreichen dies:

Gitter:

.container {
  display: grid;
  grid-template-rows: 100px;
}

Flexbox:

.container {
  display: flex;
  flex-direction: column;
}
.container .down {
  flex-grow: 1;
}

Rechner tion:

.container .up {
  height: 100px;
}
.container .down {
  height: calc(100% - 100px);
}

Überlauf:

.container {
  overflow: hidden;
}
.container .down {
  height: 100%;
}

Hinweis:

• Für Bei Browsern, die CSS Grid und Flexbox unterstützen, bieten diese Lösungen einen eleganteren Ansatz.
• Die „Overflow“-Methode kann nützlich sein, wenn der übergeordnete Container eine feste Höhe hat. Es kann jedoch zu unerwartetem Scrollverhalten kommen.

Das obige ist der detaillierte Inhalt vonWie kann ein Div ohne absolute Positionierung die verbleibende Höhe des übergeordneten Elements einnehmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!