elizabethmeyer elizabethmeyer - 1 year ago 334
CSS Question

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.


<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>


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: http://jsfiddle.net/ElizabethMeyer/UF3mb/.

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

Answer Source

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+