Come altezza: funziona automaticamente in HTML e CSS?

Question

In CSS e HTML come funziona height: auto? Cosa considerano i browser durante il calcolo dell'altezza dell'elemento, per cui height è impostato su auto?

Answer 1

Ecco un estratto su questo copied from the W3C CSS2 spec

Se ha solo figli inline-level, l'altezza è la distanza tra la parte superiore della scatola riga più in alto e la parte inferiore del riquadrato di riga in basso .

Se ha bambini a livello di blocco, l'altezza è la distanza tra il margine superiore bordo del più alto box bambino a livello di blocco e la parte inferiore margine bordo della scatola bottommost bambino a livello di blocco.

I bambini posizionati in modo assoluto vengono ignorati e le caselle relativamente posizionate vengono considerate senza il loro offset. Si noti che la casella secondaria potrebbe essere una casella di blocco anonima.

Inoltre, se l'elemento presenta discendenti fluttuanti il ​​cui margine inferiore è al di sotto del bordo del contenuto inferiore dell'elemento, l'altezza viene aumentata per includere tali spigoli. Solo gli oggetti fluttuanti che partecipano a questo contesto di formattazione del blocco sono presi in considerazione, ad esempio, i float all'interno di discendenti o posizionati in posizione assoluta non corrispondono a .

Answer 2

È possibile dividere due casi:

• div e altri contenitori: l'altezza è quella del browser userà se non si specifica nulla, cercando di contenere il contenuto degli elementi. (leggi la risposta di Mathijs per maggiori dettagli)
• immagini e altri elementi di blocco con dimensioni intrinseche (larghezza e altezza): se si specifica la larghezza, "altezza: auto" verrà ridimensionata proporzionalmente.

Quindi, in altre parole, è inutile a meno che non sia necessario ripristinare il comportamento del browser o mantenere le proporzioni su alcuni oggetti.