Ich habe die Frage gestellt the difference between height: 100%; and height: auto; Frage, aber was ist der Unterschied zwischen height: 100%; und height: inherit;?CSS Höhe: 100% vs Höhe: erben
Ich möchte im Grunde, dass die Höhe dieses Elements seinen Container füllt. Würde es einen Grund geben, 100% über inherit oder umgekehrt zu verwenden?
height: 100% wird die Höhe des Elternelements des Elements übereinstimmen, unabhängig vom Höhenwert des übergeordneten Elements.
height: inherit wird, wie der Name schon sagt, den Wert von seiner Eltern übernehmen. Wenn der Wert des Elternteils height: 50% ist, dann wird das Kind auch 50% der Höhe seines Elternteils betragen. Wenn die Größe des Elternteils in absoluten Werten definiert ist (z. B. height: 50px), dann haben height: inherit und height: 100% dasselbe Verhalten für das Kind.
Gut erklärt. [Beispiel hier] (http://jsbin.com/bepoqa/2/edit). –
@HashemQolami Großartiges Beispiel! Ich würde vorschlagen, einen Rand zu dem Kind-div hinzuzufügen, um visuell zu zeigen, dass es in dem Eltern enthalten ist. – Nepoxx
Ah, das ist der Schlüssel. Ich habe nicht über Prozente nachgedacht. Wenn der Container ein Prozent von etwas anderem als 100% hat, würde dieses Element sicherlich nicht tun, was ich möchte. Ich werde akzeptieren, sobald es mich lässt. – dnc253
Höhe: inherit: Das Schlüsselwort inherit gibt an, dass eine Eigenschaft ihren Wert vom übergeordneten Element übernehmen soll.
height: 100%: Definiert die Höhe in Prozent des umschließenden Blocks
Beispiele, look here
Haben Sie gelesen, was erben tut? Wenn der Container keine bestimmte Höhe hat, was bedeutet, dass es automatisch ist, dann werden Sie das Auto erben. Beispiel http://jsfiddle.net/50oaax77/ – Huangism
https://developer.mozilla.org/en-US/docs/Web/CSS/inherit – j08691
@ j08691 - Beachten Sie, dass für die Relevanz dieser Frage, die MDN-Dokument hat ein wichtiger Fehler in seinem ersten Absatz. Das Element erbt den * angegebenen Wert * von seinem übergeordneten Element und nicht von seinem berechneten Wert. Siehe http://www.w3.org/TR/CSS2/cascade.html#value-def-inherit – Alohci