Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 height: calc(100%) not working

CSS3 height: calc(100%) not working


I have a div that I want to fill the whole Height of the body less a set number in pixels. But I can't get height: calc(100% - 50px) to work.

(The reason I want to do this is I have elements that have dynamic heights based on some varying criteria, e.g. height of the header changes based on different elements it can contain. A content div then needs to stretch to fill the rest of the available space available.)

The div element however stays the height of the content - it doesn't seem as if it interprets 100% to be the height of the body element.


Some nav stuff here

This is the heading

This blocks needs to have a CSS calc() height of 100% - the height of the other elements.


body {background: blue; height:100%;position:relative;}
header {background: red; height: 20px; width:100%}
h1 {font-size:1.2em; margin:0; padding:0; height: 30px; font-weight: bold; background:yellow}
#theCalcDiv {background:green; height: calc(100% - (20px + 30px + 20px)); display:block}

See fiddle:

I would appreciate any help or pointers in the right direction.

Problem courtesy of: elizabethmeyer


You need to ensure the html and body are set to 100% and also be sure to add vendor prefixes for calc, so -moz-calc, -webkit-calc.

Following CSS works:

html,body {
    background: blue;
header {
    background: red;
    height: 20px;
h1 {
    height: 30px;
    font-weight: bold;
#theCalcDiv {
    height: -moz-calc(100% - (20px + 30px));
    height: -webkit-calc(100% - (20px + 30px));
    height: calc(100% - (20px + 30px));

I also set your margin/padding to 0 on html and body, otherwise there would be a scrollbar when this is added on.

Here's an updated fiddle

Browser support is: IE9+, Firefox 16+ and with vendor prefix Firefox 4+, Chrome 19+, Safari 6+

Solution courtesy of: daamsie


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 height: calc(100%) not working


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription