RichInStyle.com test pages: boxes - height

Basic support

This has a height of 200 pixels and should be apparent as such.

Percentages

This has a height of 300%. However, since the containing block does not have an explicitly declared height, it should look perfectly normal.

Spacer element

This should have a normal height, because in height: 200px; height: 100%, 100% should be treated as auto: it should not be ignored.

This is a spacer element.

This is a DIV with a height of 100 pixels.

This is a DIV inside the DIV with a height of 100% - 100 pixels. As a result, it should overlap the bottom of the border of the DIV.

This is a spacer element.

This has a height of 95% = 950 pixels.

This has a height of 950 pixels. As a result, it should be the same height as that element.

Replaced element percentage height test

The two images above should have the same height.

Zero height test

This has height: 0. This overrides the height as calculated by the total line box height. As a result, there should not be any red visible whatsoever.

This has height: 0. As a result, the border should be just above (or even overlapping with) the text.

DIV vs. P support test

This should have a height of 500 pixels.