Heim > Web-Frontend > CSS-Tutorial > Wie kann ein Div ohne absolute Positionierung die verbleibende Höhe des übergeordneten Elements einnehmen?

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

Linda Hamilton
Freigeben: 2024-12-06 15:12:18
Original
900 Leute haben es durchsucht

How to Make a Div Occupy Remaining Parent Height Without Absolute Positioning?

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>
Nach dem Login kopieren
#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

Flexbox:

.container {
  display: flex;
  flex-direction: column;
}
.container .down {
  flex-grow: 1;
}
Nach dem Login kopieren

Rechner tion:

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

Überlauf:

.container {
  overflow: hidden;
}
.container .down {
  height: 100%;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage