70352 - height property on block element interpreted incorrectly

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Jeffrey Baker]

The CSS2 spec states that the height property, when given as a percentage, is
the height of the content area as a percentage of the containing block.  This is
pretty confusing with respect to children of the BODY element, which does not
naturally take up the entire viewport (except that its background is
reverse-propogated to the root *sigh*).

The expected behavior, in my mind, is that a box specified as height: 10%;
padding: 5%; margin-top: 40%; margin-top: 40%; would force the box to be
centered vertically in the viewport, given that it was the only element in the
document.  I'm probably reading this wrong. Without this, is there a sensible
way to center something in the viewport?

I can currently acheive this effect by setting the content height to 100%, and
margin-top/bottom to equal values which when added to 2xpadding == 100.  For
example:

height: 100%;
margin-top: 49%;
margin-bottom: 49%;
padding: 1%;

But, that seems really wrong and in any case IE5.5 does it differently, giving
the expected result of a box whose height is as tall as the viewport but shift
down by half a page.

This is a pretty hairy part of the standard and if I've misrepresented Mozilla's
compliance I apologize.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Well, this should always work:

body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

and then setting "height: 10%; padding: 5%; margin-top: 40%; margin-top: 40%;"
or whatever on your box...

Comment 2

[Hixie (not reading bugmail)]

(fixed, not absolute)

This is INVALID.

# 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 
# [...]
# Percentages: refer to width of containing block  
 -- http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin-top

# 'height'
# [...]
# <percentage> 
#   [...] If the height of the containing block is not specified explicitly 
#   (i.e., it depends on content height), the value is interpreted like 'auto'. 
 -- http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-height

Comment 3

[Hixie (not reading bugmail)]

me resolve me no verify me reassign qa to petersen