CSS：高度：100％对比底部：0

Question

之间的本质区别是什么：

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

和

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

Answer 1

对于每个属性，子元素的高度确定不同：

bottom: 0 =＆gt;    child_height = parent_height - child_margin - child_border

height: 100% =＆GT;    child_height = parent_height

换句话说，height: 100%将孩子的内部高度设置为与其父级相同的高度，而bottom: 0设置外部高度孩子与其父母的高度相同。

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

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

Answer 2

只需将height设置为100％将其设置为文档高度，而​​如果将top和bottom设置为0，则会将其设置为对齐元素在屏幕的顶部和底部，它将在视觉上做同样的事情，虽然一些旧的浏览器可能“更喜欢”height被设置为100％。