Почему ширина страницы влияет на «margin-top: 50%» в Firefox?

Question

В этом JSFiddle

http://jsfiddle.net/9UMRk/

Div имеет наценку 50%. Который я бы ожидал отрегулировать по высоте страницы.

Однако, если вы измените размер окна в Firefox (3 и 4), вы увидите, что вертикальное положение div зависит от ширины страницы, но не от высоты страницы.

Почему?

Answer 1

Это кажется нелогичным, но на самом деле соответствует блочной модели для полей, которая гласит: в спецификации уровня 2.1 CSS :

Процент рассчитывается относительно ширины сгенерированного блока, содержащего блок. Обратите внимание, что это верно и для 'margin-top' и 'margin-bottom'. Если ширина содержащего блока зависит от этого элемента, то результирующий макет не определен в CSS 2.1.

И в спецификации CSS3 (более четко IMO):

Обратите внимание, что в горизонтальном потоке проценты для 'margin-top' и 'margin-bottom' относятся к ширине содержащего блока, а не к высоте (и в вертикальном потоке 'margin-left' и 'margin-right' относятся к высоте, а не к ширине.

(выделено жирным шрифтом мое.)