Struggling with your height? No, not your physical height. I am talking about the height of a given CSS element. At times, this is something that eludes the best of us. Thankfully there are articles like this one I found today at quirksmode.org.

Right off the bat, you are shown how this height management thing goes down and are given clear explanations that help alleviate any confusion. The page it is being shown on may seem rather drab, but rest assure that the content is right on the money.

According to the specs height: 100% means: “give the element a height of 100% of the containing block’s height.” In ‘Quirks mode’ this rule works to our advantage. The containing block of the div is the body, and the body itself stretches 100% of the viewport. So we tell the div to stretch 100% of 100% and it works.

Of course ‘Strict mode’ is far more complicated. Here the body doesn’t stretch 100% of the viewport. Instead, it stretches only as much space as is necessary for containing its elements. Besides, in its turn the body has a containing block: the html tag.