What does min-height: 100% do when nothing has an explicit height?

Question

My university website has a strange issue on Opera 12.xx only (as far as I'm aware) where all the content is ludicrously spaced out, with giant sections of empty space separating all the sections.

When I inspected the CSS, I noticed several containers had the property min-height: 100% going up to and including html and body, but no intervening parent had an explicitly defined height. My guess is that Opera recursed all the way up the DOM tree and, since it got to the top, made all of these at least 100% of the viewport height.

Based on my understanding of CSS, this seems like what should be happening. My question(s), then:

• Is it what's supposed to be happening, or am I misunderstanding something?
• If so, why does this issue only affect Opera 12? (Opera 15 is immune because it uses Webkit, I know. I mean, why does Webkit display it normally?)
• What is the point of all these min-height declarations? There doesn't seem (again, in my understanding) to be an answer to 100% of what, and isn't this forcing the elements marked to base their height on their parent's content, rather than their own? What's the sense in that?

I was told by one of the university webmasters that it had to be this way because this site employs responsive design, and while I admit I don't fully understand what all that buzzword has come to mean, I don't understand what that has to do with it.

Answer 1

When in doubt, consult the spec:

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 percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').

Opera's behavior isn't consistent with what the spec outlines, so it's a browser bug.