【发布时间】：2011-11-15 05:26:48
【问题描述】：
在这个 JSFiddle 中
一个 div 的上边距为 50%。我希望调整到页面高度。
但是，如果您在 Firefox（3 和 4）中调整窗口大小，您会看到 div 的垂直定位受页面宽度影响，但不受页面高度影响。
为什么？
【问题讨论】：
【发布时间】：2011-11-15 05:26:48
【问题描述】：
这似乎违反直觉，但实际上与边距的盒子模型一致，即in the CSS level 2.1 spec：
百分比是根据生成框的包含块的宽度计算的。请注意，'margin-top' 和 'margin-bottom' 也是如此。如果包含块的宽度取决于此元素，则结果布局在 CSS 2.1 中未定义。
还有in the CSS3 spec（更清楚的是IMO）：
请注意，在水平流中，'margin-top' 和 'margin-bottom' 的百分比是相对于包含块的宽度，而不是高度 （在垂直流中，'margin-left' 和 'margin-right' 是相对于高度，而不是宽度）。
（粗体强调我的。）
【讨论】：
-
由于这是标准行为，您应该期望在其他浏览器中也看到相同的行为。
-
嗯...哇。我是否遗漏了某些东西，或者这是定义 margin-top 应该如何工作的一种非常奇怪的方式？我看到 webkit 选择了完全不同的方式。在 Safari 和 Chrome 中，只有页面高度会影响 margin-top:50%。从表面上看，这似乎是一个更有用的实现。
-
根据父级高度定义百分比边距的问题在于，父级高度通常取决于所讨论的边距。所以在大多数情况下，它充其量也不会做任何事情......