Warum erbt mein untergeordnetes Element nicht die Höhe, wenn das übergeordnete Element nur „min-height' hat?

Höhe des untergeordneten Elements wird nicht mit der Mindesthöhe/Maximalhöhe des übergeordneten Elements und ohne explizite Höhe angewendet

Problem:

Betrachten Sie das folgende CSS:

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

Obwohl die Höhe des untergeordneten Elements auf 100 % eingestellt ist, Es nimmt keine Höhe ein, wenn das übergeordnete Element einen Mindesthöhenwert, aber keine explizite Höhe hat. Nur wenn die Höhe des übergeordneten Elements auf gerade 1 Pixel eingestellt ist, füllt das untergeordnete Element den Container korrekt aus.

Erklärung:

Im ersten Fall (keine explizite Höhe für übergeordnetes Element), schlägt die prozentuale Größe des untergeordneten Elements fehl, weil:

Gemäß der CSS-Spezifikation:

"Wenn die Höhe des enthaltenden Blocks nicht explizit angegeben ist (d. h. es hängt von der Höhe des Inhalts ab) und dieses Element nicht absolut positioniert ist, wird der Wert auf „auto“ berechnet. und die Höhe des Elements hängt immer noch von seinem Inhalt ab.

Betrachten Sie zur Veranschaulichung das folgende modifizierte Beispiel:

Hier legt der Container explizit einen kleinen Abstand fest, Dadurch muss das untergeordnete Element eine kleinere maximale Höhe als 300 Pixel haben. Die Animation ändert dynamisch die Größe des Kindes und zeigt, dass die Größe des Kindes tatsächlich vom verfügbaren Platz abhängt und nicht nur von seiner 100 %-Größeneinstellung.

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
  padding: 10px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 400px;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  from {
    height: 100px;
  }
}

Das obige ist der detaillierte Inhalt vonWarum erbt mein untergeordnetes Element nicht die Höhe, wenn das übergeordnete Element nur „min-height' hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!