高度：calc（100％）在CSS中无法正常工作

高度：calc（100％）在CSS中无法正常工作

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