css - 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

Answer 2

很简单，设置为 100% 会将其设置为文档高度，而height​​如果设置为 0，它将设置为将元素与屏幕的顶部和底部对齐，它会在视觉上做同样的事情，尽管一些较旧的浏览器可能“更喜欢”设置为 100%。topbottomheight