How height: does auto work in HTML and CSS?

Question

In CSS and HTML, how does height: auto ? What do browsers consider when calculating the height of an element for which height set to auto ?

Answer 1

You can separate two cases:

• div and other containers : height is the one that the browser will use if you do not specify anything while trying to hide the contents of the element. (read Mathijs for more details).
• images and other block elements with internal dimensions (width and height): if you specify the width, then "height: auto" will scale proportionally.

In other words, it is useless if you do not need to reset the behavior of the browser or keep the proportions for some objects.

Answer 2

Here an excerpt from this is copied from the W3C CSS2 specification

If it has only child rows, height is the distance between the top of the top row and the bottom of the bottom row of the row.

If he has children with a block level, height is the distance between the upper edge of the edge of the upper block child box and the lower, extreme, lower, child window of the block level.

Absolutely positioned children are ignored and relatively positioned boxes are considered without their displacement. Note that the child box may anonymous block block.

In addition, if an element has floating descendants whose bottom edge is below the edge of the lower content of the element, then the height is increased to include these edges. It only floats that they are involved in this context of block formatting, for example, floats inside absolutely positioned descendants or other floats are not.