Ho visto la domanda che chiede the difference between height: 100%; and height: auto;, ma qual è la differenza tra height: 100%; e height: inherit;?Altezza CSS: 100% rispetto all'altezza: eredita
In pratica voglio che l'altezza di questo elemento si riempia/corrisponda al suo contenitore. Ci sarebbe un motivo per utilizzare 100% su inherit o viceversa?
height: 100% corrisponderà all'altezza del genitore dell'elemento, indipendentemente dal valore di altezza del genitore.
height: inherit, come implica il nome, erediterà il valore dal suo genitore. Se il valore del genitore è height: 50%, il bambino sarà anche il 50% dell'altezza del genitore. Se la dimensione del genitore è definita in valori assoluti (ad esempio height: 50px), allora height: inherit e height: 100% avranno lo stesso comportamento per il bambino.
Ben spiegato. [Esempio qui] (http://jsbin.com/bepoqa/2/edit). –
@HashemQolami Ottimo esempio! Suggerirei di aggiungere un margine al div figlio per mostrare visivamente che è contenuto all'interno del genitore. – Nepoxx
Ah, questa è la chiave. Non pensavo alle percentuali. Se il contenitore ha una percentuale di qualsiasi cosa diversa dal 100%, questo elemento sicuramente non farebbe quello che voglio che faccia. Accetterò appena mi lascerà. – dnc253
altezza: inherit: La parola chiave inherit specifica che una proprietà deve ereditare il suo valore dal relativo elemento padre.
altezza: 100%: definisce l'altezza in percentuale del blocco contenitore
Per esempi, look here
Hai letto ciò che ereditano lo fa? Se il contenitore non ha un'altezza specificata, il che significa che sarà auto, quindi si erediterà l'auto. Esempio http://jsfiddle.net/50oaax77/ – Huangism
https://developer.mozilla.org/en-US/docs/Web/CSS/inherit – j08691
@ j08691 - Si noti che per la pertinenza a questa domanda, il documento MDN ha un errore importante nel suo primo paragrafo. L'elemento eredita il * valore specificato * dal suo genitore, non il suo valore calcolato. Vedi http://www.w3.org/TR/CSS2/cascade.html#value-def-inherit – Alohci