CSS:高度:100%对比底部:0

Question

以下之间的本质区别是什么:

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

和

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

Answer 1

子元素的高度对于每个属性的确定方式不同:

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

height: 100%=> child_height = parent_height

换句话说,将子项height: 100%的内部高度设置为其父项的相同高度,同时bottom: 0将子项的外部高度设置为其父项的高度.

示例:http://jsfiddle.net/2N4QJ/1/

有关位置/维度的更多信息:http: //msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx