Jak wysoko: auto działa w HTML i CSS?

Question

W CSS i HTML działa jak height: auto? Co uwzględniają przeglądarki podczas obliczania wysokości elementu, dla którego ustawiono height na auto?

Answer 1

Oto fragment o tym copied from the W3C CSS2 spec

Jeśli ma tylko dzieci inline poziomie, wysokość jest odległością między szczycie najwyższego pola liniowego i dolnej części najniżej pola liniowego .

Jeśli ma dzieci blokowe wysokość jest odległość pomiędzy górną graniczną krawędzi o najwyższym dostępem dzieci blokowego i dolną granicznej krawędzi tego najniższego dostępem dzieci blokowego.

Absolutnie ustawione dzieci są ignorowane, a względnie ustawione pola są traktowane bez ich przesunięcia. Zauważ, że pole podrzędne może być anonimowym blokiem.

Ponadto, jeśli element posiada ruchome potomków, której dno krawędź brzeg znajduje się poniżej dolnej krawędzi elementu zawartości, a następnie wysokość zwiększa obejmuje te krawędzie. Uwzględniane są tylko obiekty pływające, które uczestniczą w tym kontekście formatowania bloków, na przykład pływające wewnątrz absolutnie rozmieszczonych potomków lub innych obiektów pływających nie są.

Answer 2

Można podzielić dwóch przypadkach:

• div i innych pojemników: wysokość jest jedna przeglądarka użyje jeśli nic nie zostanie określona, ​​próbując zawierać zawartość pierwiastków. (przeczytaj odpowiedź Mathijsa po więcej szczegółów)
• obrazy i inne elementy bloków o nieodłącznych wymiarach (szerokość i wysokość): w przypadku określenia szerokości, "height: auto" będzie skalować proporcjonalnie.

Innymi słowy, jest bezużyteczny, chyba że trzeba zresetować zachowanie przeglądarki lub zachować proporcje do niektórych obiektów.