How to Set the Height of an HTML Element to 100% Using CSS

A commonly asked question in website design is "how do you set the height of an element to 100%"?

This may seem like an easy answer. You simply use CSS to set the height of an element to 100%, but this doesn't always stretch that element to fit the entire browser window. Let's find out why this happens and what you can do to achieve this visual style.

Pixels and Percentages

When you define the height of an element using the CSS property and a value that uses pixels, that element 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 your design.It does not matter how larger your browser window is, this element will be 100 pixels in height.

Percentages work differently than pixels. 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, which is 50% of it's parent element.

Why Percentage Heights Fail

If you're designing a webpage, 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? Unfortunately, this is not the case at all.

To understand why this happens, you must 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 (100% width is the default).

Height value is calculated differently than width. In fact, browsers don't evaluate height at all unless the content is so long that it goes outside of the viewport (thus requiring scroll bars) or if the web designer sets an absolute height for an element on the page. Otherwise, the browser simply lets the content flow within the width of the viewport until it comes to the end. The height is not actually calculated at all.

Problems occur when you set a percentage height on an element that has parent elements without 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:

 


  


    


      


        Content here
      


    


  

 

You likely want the div and the paragraph in it to have a 100% height, but that div actually has two parent elements:

and. 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. So you would need to use CSS to set the height of not only the div, but also the body and html elements. This can be a challenge, since you can quickly get overwhelmed with everything being set to 100% height, only to achieve this desired effect.

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. Remember, the CSS box model adds margin, border, and padding onto the size of an element, so 100% with any of those other box model values will actually be more than 100%.

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 break the visual design of your page. If there is content below that column, the text will simply write over the top of it. I often see this happen when a web designer tries to force the height of a page and gets it working perfectly for launch, but when content on that page changes in the future, their absolute heights totally break the flow of the page. This is doubly true when you are building responsive websites whose width and height must change with the size of the viewport.

To fix this, you can set the of the element as well. If you set it to auto, scroll bars will appear if they are needed ​but disappear when they aren't. That fixes the visual break, but it adds scrollbars where you may not want them. 

Using Viewport Units

Another way you can tackle this challenge is to experiment with CSS Viewport Units. By using the "viewport height" unit of measurement, you can size elements to take up a defined height of the viewport, and that will change as the viewport changes!

This is a great way to get your 100% height visuals on a page but still have them be flexible for different devices and screen sizes.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 10/9/16