Soll ein Element ein „min-heigh“ in Prozent haben, braucht der Browser für die Errechnung seiner Höhe eine Bezugsgröße (-höhe). Und die holt er sich vom Elternelement, dass nur eine „height“ haben darf - keine „min-height“. Sonst kann der Browser die Höhe nicht errechnen und schaltet auf „height: auto“ um.
Ist die Höhe des Elternelements auch in Prozent angegeben, so ist die Höhe seines Elternelements die Bezugshöhe.
Und das kann so bis hin zum root-Element (html) gehen. Als Bezugsgröße für das html-Element (root-Element) selbs dient der Browser-Fenster.
In einer Kette von Nachfahren-Elementen kann es also nur ein Element mit „min-height“ geben. Gleichzeitig ist das auch das letzte (innerste) Element. Seine Kindelementen haben keine Bezugshöhe.
Es kann auch mehrere Elementen mit „min-height: 100%;“ geben. Die müssen allerdings Geschwister sein – neben einander stehende Elementen (sei es per „position“, „float“ „inline-block“, …).
Bei (CSS-) Tabellen wird eine Höhe (beispielsweise „height: 100%;“) als „min-height“ interpretiert und behandelt. Das gilt für „table“, bzw. „display: table“ selbst, wie auch für „td“, bzw. „display: table-cell“, etc.
Geändert von etux (06.01.2015 um 19:12 Uhr)
|