CSS3高度：calc(100％)不工作

我有一个div,我想填充身体的整个高度少一个像素的数字.但我无法获得高度：calc(100％ – 50px)工作.

(我想这样做的原因是,我有一些基于一些不同标准的动态高度的元素,例如,根据可以包含的不同元素,头的高度变化,然后需要拉伸以填充剩余的可用可用空间.)

然而,div元素保持内容的高度 – 看起来好像它将100％解释为body元素的高度.

HTML：

<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>

CSS：

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}

见小提琴：http://jsfiddle.net/ElizabethMeyer/UF3mb/.

我会感谢任何帮助或指向正确的方向.

解决方法

您需要确保html和body设置为100％,并且还要确保为calc添加供应商前缀,因此-moz-calc,-webkit-calc.

以下CSS作品：

html,body {
    background: blue;
    height:100%;
    padding:0;
    margin:0;
}
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: -moz-calc(100% - (20px + 30px));
    height: -webkit-calc(100% - (20px + 30px));
    height: calc(100% - (20px + 30px));
    display:block
}

我还将html和body上的margin / padding设置为0,否则在添加时会有一个滚动条.

这是一个更新的小提琴

http://jsfiddle.net/UF3mb/10/

浏览器支持是：IE9,Firefox 16以及厂商前缀Firefox 4,Chrome 19,Safari 6