I've been using CSS for a few years, but there are some "quirks" that I cannot quite fathom. One of them is the height property when specified with a percentage. To quote the CSS 2.1 Specification (under percentage):

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

My question is, what is the rationale behind this decision? Is there a bigger picture that makes this decision sensible? As far as I know, this is causing some of the most notorious problems like getting the columns to have equal heights in a float-based multi-column layout.

  • 1
    Perhaps because it is or at least looks like a circular dependency. – CodesInChaos Dec 5 '14 at 15:22
  • I think @CodesInChaos is right - note the verbiage from the spec: "Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself, and thus a percentage height on such an element can always be resolved." Further note from the CSS3 draft, "In order to prevent cycling sizing, the auto value of min-height and max-height does not factor into the percentage size resolution of the box’s contents" - maybe this hints at it too? For current CSS, I suspect this also ties into the mostly-one-pass-for-layout strategy. – J Trana Dec 29 '14 at 8:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.