CSS: height:100% vs bottom:0

Question

What is the essential difference between:

position: absolute;
top: 0;
height: 100%;

and

position: absolute;
top: 0;
bottom: 0;

Answer 1

The height of the child element is determined differently for each property:

bottom: 0 => child_height = parent_height - child_margin - child_border

height: 100%=> child_height = parent_height

In other words height: 100% set the inner height of the child to the same height of its parent, while bottom: 0 sets the outer height of the child to the same height of its parent.

example: http://jsfiddle.net/2N4QJ/1/

More info about position/dimension: http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx