您需要确保将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+
