Percentage Height and Calc()

March 2014

Percentage sizing is great for dynamic layouts. It requires that parent elements already have an explicit size set. The only exception to having a size set is the html element. For this example, I needed a 100% height scrollable sidebar on a page with a few different navigations. The problem arose with the fact that some of the elements on the page contained navigations with a height set in pixels.

  div // 100% height
    nav // 50px
    div#sidebar // 100% height desired

If we make #sidebar 100% height, it will be the height of it's parent + 50px. This could result in some undesirable breaks.

Start by making the html, and body 100% height, as well as any additional containers leading up to our sidebar.

CSS3 Calc() to the rescue!

Calc allows you to assign percentage height to a element while accounting for pixel size amounts.

  div {
    height: calc(100% - 50px);

Since I know the size of my navigation I can use calc to set the hieght of my sidebar.

Some useful references:

Sizing Related

comments powered by Disqus