The height Property

The height property is used to specify the height of the content-area of block-level elements, inline replaced elements and other elements to which the declarations display:block or display:inline-block have been applied.

By default, the height of an element is just enough to accommodate all its descendant elements.

Its initial value is auto. It is not an inherited property. It can take length values, percentages and the keywords auto and inherit. Percentage values refer to the height of the containing block element. Negative values are not allowed.

height with px values

In the example below the height property is applied to a block-level element.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';height:500px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p>

The height property cannot be applied to inline-level non-replaced elements. However, it can be applied to inline-level replaced elements such as img.

Example 2: <p style="font-size:35px;font-family:'Times New Roman'">the <img src="20x50.jpg" alt="20x50.jpg">quick <img style="height:100px" src="20x50.jpg" alt="20x50.jpg"> lazy dog.</p>

In the above example, the image is resized proportionally to 40 pixels by 100 pixels. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the image is anti-aliased. However, in Internet Explorer 6 and Internet Explorer 7 the image is not anti-aliased.

height with percentage values

With the height property, percentage values refer to the height of the containing element. If the parent element does not have it's height declared with a length or percentage value, then the percentage height declaration of the child element is ignored. The reason for this is, since, by default, an element is just tall enough to contain its descendant elements, if the height of a descendant element was in turn dependent on the height of the parent element, it would be an infinite loop.

Example 3: <div style="height:400px;background-color:purple"><p style="font-size:35px;font-family:'Times New Roman';height: 75%">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p></div>

In the above example, the height of the <p> will be 75% of 400px, which is 300px.

Example 4: <div style="height:400px;background-color:purple"><div><p style="font-size:35px;font-family:'Times New Roman';height:75%">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p></div></div>

In the above example, since the <p>'s parent element does not have a percentage or px height declaration, the height declaration on the <p> has no effect. However, Internet Explorer 6 and Internet Explorer 7, due to a bug, render the <p> with a height of 300px. This buggy behavior can be fixed by triggering Internet Explorer 6 and 7's hasLayout property on the <p>'s parent div. One way of doing this is by using the Internet Explorer-only declaration zoom:1 on the div.

width with em values

em values values refer to the font size of the element.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';height:7.15em">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p>

In the above example, the height of the <p> is 7.15*35px = 250.25px

height:auto

Since auto is the initial value of height, the height:auto declaration is only useful to override another height declaration that has been applied to an element.

height:inherit

height is not an inherited property. However, the height:inherit declaration can be used in order that an element inherits the height declaration of its parent.

Internet Explorer 6 and Internet Explorer 7 ignore the height:inherit declaration.

Concluding Notes

Unlike the width property, with height, percentage-value declarations are ignored if the parent element does not have a percentage or px height declaration, even if an ancestor element does.

In Firefox 3, Firefox 3.5, Internet Explorer 7 and Internet Explorer 8, when the height of the content area + padding + margins of an element is more than the specified height of its containing element, the element overflows out of the content area of the containing element. However, in Internet Explorer 6 the height of the containing element is increased to accommodate the height of the child element without overflowing. That is, Internet Explorer 6 treats the height declaration as the minimum height of an element. This is a bug.

In Internet Explorer 7, when the content area of an element overflows its containing block, unlike other browsers, the element's background image or color covers the elements that follow. This can be fixed by using the Internet Explorer-only declaration zoom:1 on the elements that follow the containing block.

Internet Explorer 6 and Internet Explorer 7 ignore the height:inherit declaration. Therefore, this declaration must be avoided.

Internet Explorer 6 and Internet Explorer 7 sometimes render elements in unexpected ways when using the height property. This can often be fixed by using the Internet Explorer-only declaration zoom:1 on the containing element.