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
?Come altezza: funziona automaticamente in HTML e CSS?
risposta
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 .
È 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.
- 1. altezza Css in percentuale non funziona
- 2. HTML Il CSS regola automaticamente l'altezza
- 3. Ellissi HTML/CSS (...) Non funziona
- 4. Linea principale e altezza linea CSS
- 5. Altezza 100% su html/body non funziona su iPhone
- 6. HTML - Colonne ignorare altezza
- 7. CSS div 100% altezza
- 8. altezza iframe in% non funziona con IE
- 9. HTML e CSS sfondo
- 10. HTML + CSS: 'a' di larghezza non funziona
- 11. 100% altezza e CSS sul mobile
- 12. HTML TextArea ridimensiona automaticamente
- 13. CSS 100% altezza Div
- 14. Codice CSS in HTML e main.css
- 15. input HTML e selezionare diversa altezza
- 16. Altezza finestra = "Auto" non funziona come previsto
- 17. "body {background-color}" funziona in HTML ma non in CSS
- 18. Puzzle di allineamento verticale CSS con altezza variabile e altezza riga variabile
- 19. Come ridurre HTML con CSS e Javascript?
- 20. Come simulare \ hfill con HTML e CSS?
- 21. HTML e CSS + Twitter Bootstrap: layout di pagina intera o altezza 100% - NPX
- 22. Layout di tile con CSS e HTML
- 23. CSS: nascondere elemento, ma mantenere la larghezza (e non altezza)
- 24. Riduzione altezza riga tabella HTML
- 25. Ottieni altezza di div senza altezza impostata in css
- 26. Rifletti orizzontalmente html e css
- 27. Misura larghezza e altezza dell'elemento Html in Dart
- 28. come creare un iframe html 100% larghezza e altezza?
- 29. come definire altezza minima per tbody in css
- 30. pixel in HTML/CSS
È complicato, dipende da molti fattori e [descritto nelle specifiche] (http://www.w3.org/TR/CSS2/visudet.html#the-height-property). – Quentin