differenza tra altezza css: 100% vs altezza: auto

167

Mi è stata posta una domanda in un'intervista che "qual è la differenza tra il CSS height:100%e height:auto?"

Qualcuno può spiegare?

css

— Gowsikan
fonte

236

height: 100% fornisce all'elemento un'altezza del 100% del suo contenitore padre.

height: auto significa che l'altezza dell'elemento dipenderà dall'altezza dei suoi figli.

Considera questi esempi:

altezza: 100%

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv sta per avere height: 50px

altezza: auto

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv sta per avere height: 10px

— Manish Mishra
fonte

5

Penso che nel caso di 'height: auto #innerDiv sarà 10px + the size it needs for its own content- vedi questo jsfiddle

— BornToCode

@Manish Mishra: qual è il miglior design reattivo? Impostare l'altezza dell'elemento figlio o dell'elemento contenitore e lasciare che l'altro ne derivi l'altezza?

— John Strood,

@Djack, tutto dipende da quale aspetto, sensazione e comportamento ti aspetti dal tuo design su vari schermi, e di conseguenza scrivi i tuoi css. Non esiste una regola globale generica come setting the height of the child element or the container element. Puoi fare tutto il necessario per realizzare il tuo progetto, purché tu segua una certa coerenza, evitando duplicazioni, riducendo le rilavorazioni, raggruppando layout comuni. In breve, ci deve essere un sistema / modello nel tuo lavoro, in modo che sia facile da leggere e modificare, e naturalmente il fatto che dovrebbe funzionare

— Manish Mishra

2

Penso che un buon modo di pensare all'auto sia che tu sia "sconvolgente", è come non averlo impostato.

— Niico,

1

Ho modificato il violino che BornToCode ha condiviso sopra, per renderlo più ovvio che autofa sì che l'elemento cresca per adattarsi SIA al suo contenuto, sia al contenuto di suo figlio. Al contrario, un valore di Altezza fissa non aumenta (o mostra) il contenuto che non può adattarsi all'altezza dichiarata. jsfiddle.net/m3f8y6xr/1 Credo che questa risposta non sia sufficientemente formulata per rendere ovvio che l'elemento crescerà per includere tutto il contenuto, sia esso il suo testo o il contenuto di un bambino. Naturalmente si può sostenere che anche il suo testo è un bambino. Ciò fornisce una conferma visiva del comportamento.

— SherylHohman,

5

Un un'altezza di 100% per la tratta, presumibilmente, l'altezza della vostra finestra interna del browser , perché questo è l' altezza del suo genitore , la pagina. autoUn'altezza sarà l' altezza minima del necessario per contenere .

— Rohit Azad
fonte

3

Questo non è necessariamente corretto se l'elemento genitore è uno con un'altezza definita che non si adatta alle dimensioni della finestra del browser

— goonerify

1

L'impostazione predefinita è height: autonel browser, ma height: X%definisce l'altezza in percentuale del blocco contenitore.

— Vahid Heydarinezhad
fonte

0

altezza: 100% funziona se il contenitore padre ha una proprietà height specificata altrimenti, non funzionerà

— Chukwuemeka
fonte