height: 100%
height: 50%
parent, height:400px
height: 100%
height: 50%
parent, height:400px; padding-top: 100px
height: 100%
height: 50%
parent, height:400px; padding: 50px 0
height: 100%
height: 50%
parent, height:400px; border-top-w: 100px

This page puts IE in quirks mode. Here a height includes padding and border (border-box height). But a percentage height on a child does not use as reference the border-box of the parent.

Similar cases as above, but with some margins on the child boxes. These show that a percentage height is computed on the basis of the content-box of the parent. The latter is expanded if needed to contain the child but when this occurs the child height is not recomputed.

height: 100%, m-t: 50px
height: 50%, m-t: 50px
parent, height:400px
height: 100%, m-t: 50px
height: 50%, m-t: 50px
parent, height:400px; padding-top: 100px
height: 100%, m-t: 50px
height: 50%, m-t: 50px
parent, height:400px; padding: 50px 0
height: 100%, m-t: 50px
height: 50%, m-t: 50px
parent, height:400px; border-top-w: 100px

This page in standard mode: IE, percentage height and box model - standards. A similar page testing width instead of height IE/Quirks, percentage width and box model: the behavior is slightly different since the percentage is not computed on the basis of the content-box of the parent.

CSS tests home