我有一个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,否则在添加时会有一个滚动条.
这是一个更新的小提琴
浏览器支持是：IE9,Firefox 16以及厂商前缀Firefox 4,Chrome 19,Safari 6
