When you define the height of an element using the CSS height property, that property will take up that much vertical space in the browser. For example, a paragraph with a height: 100px; will take up 100 pixels of vertical space in the design.
According to the W3C specification, percentage heights are calculated with respect to the container's height. So if you put a paragraph with a height: 50%; inside a div with a height of 100px, the paragraph will be 50 pixels in height.
Why Percentage Heights Fail
If you're designing a web page, and you have a column that you'd like to take up the full height of the window, the natural inclination is to add a height: 100%; to that element. After all, if you set the width to width: 100%; the element will take up the full horizontal space of the page, so height should work the same, right?
To understand why, you need to understand how browsers interpret height and width. Web browsers calculate the total available width as a function of how wide the browser window is opened. If you don't set any width values on your documents, the browser will automatically flow the contents to fill the entire width of the window.
But height is calculated differently. In fact, browsers don't evaluate height at all unless the content is so long that it goes outside of the view port (thus requiring scroll bars) or if the web designer sets an absolute height on an element on the page. Otherwise, the browser simply lets the content flow within the width of the view port until it comes to the end. The height is not calculated at all.
The problem occurs when you set a percentage height on an element who's parent elements don't have heights set. In other words, the parent elements have a default height: auto;. You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.
If you want to set a height on your web pages to a percentage, you have to set the height of every parent element of the one you want the height defined. In other words, if you have a page like this:
<html> <body> <div style="height: 100%;"> <p> Make this division 100% height. </p> </div> </body> </html>
The div that you want to give a 100% height to has two parent elements: <body> and <html>. In order to define the height of the div to a relative height, you must set the height of the body and html elements as well.
<html style="height: 100%;"> <body style="height: 100%;"> <div style="height: 100%;"> <p> Make this division 100% height. </p> </div> </body> </html>
Here's an example of the same page as before, with the height set on the parent elements.
Some Things to Note When Working with 100% Heights
Now that you know how to set the height of your page elements to 100%, it can be exciting to go out and do that to all your pages. But there are a few things you should be aware of:
Margins and padding can add a scroll bar where you don't want one.
One of the most annoying things I've found with working with percentage heights (and widths) is that then the padding and margins on those same elements can add scroll bars to the page, even though all the content displays without needing scroll bars. This is because the height or width of the element is the first thing that is calculated. Then the margins and paddings are added on. So if you have an element with a height of 100% and top and bottom margins of 10 pixels each, there will be a scroll bar for the extra 20 pixels.
If your content takes up more than the defined height, it will overwrite anything after it.
In other words, if you have a design with a column that is 80% in height, and the content that is inside of it will take up 100% of the height, that extra 20% will continue below the column. And if there is content below that column, the text will simply write over the top of it.
The fix for this is to set the overflow of the element as well. I usually set it to auto so that scroll bars will appear if they are needed, but disappear when they aren't. But you can also set it to hidden which simply clips the content when it reaches the limit of the height.
Posted in: CSS