Как высота: авто работает в HTML и CSS?

Question

В CSS и HTML как работает height: auto? Что рассматривают браузеры при расчете высоты элемента, для которых height установлено на auto?

Answer 1

Вот выдержка на этом copied from the W3C CSS2 spec

Если он имеет только ребенок инлайн-уровня, высота расстояние между верхней частью верхней линией коробки и нижней частью окна нижней линией .

Если он имеет дочерние элементы уровня блока, высота расстояние между верхнего полем-краем верхнего дочернего бокса уровня блока и нижней маржинального-краем нижнего дочернего бокса уровня блока.

Абсолютно расположенные дети игнорируются, и относительно позиционируются коробки считаются без их смещения. Обратите внимание, что дочерний ящик может быть анонимным блоком блока .

Кроме того, если у элемента есть плавающие потомки, нижняя граница которых находится ниже края нижнего содержимого элемента, то высота увеличивается, чтобы включить эти края. Только плавает, что принимают участие в этом контексте форматирования блока, учитываются , например, плавает внутри абсолютно позиционированных потомков или других поплавков .

Answer 2

Вы можете разделить два случая:

• DIV и другие контейнеры: высота является один браузер будет использовать, если вы ничего не указать, пытаясь содержать содержимое элемента. (см. ответ Mathijs для получения более подробной информации)
• изображения и другие элементы блока с внутренними размерами (ширина и высота): если вы укажете ширину, то «высота: авто» будет пропорционально масштабироваться.

Другими словами, бесполезно, если вам не нужно сбросить поведение браузера или сохранить пропорции для некоторых объектов.