calc（）在CSS3中无法正常工作

Question

我试图制作一个高度为100％的div - 130px;

代码是：

height: calc(100% - 130px); // Here 80px of TOC-header and 50 of TOC-footer
height: -moz-calc(100% - 130px);
height: -webkit-calc(100% - 130px);

当我使用浏览器控制台（Inspect Element）编辑它时效果很好。但是当我在代码中应用相同的时候它会显示calc（-30％）;并且由于内容没有可见性。

我附上了萤火虫下面的截图。真是令人困惑的时刻。

任何帮助将不胜感激。感谢。

Answer 1

说height: 100%指的是父母身高的相同高度。

在your case 中，.element1的{​​{1}} height无法识别。设置此元素的实际高度，您将看到预期的输出。

例如：

100%

<强> DEMO

Answer 2

将您的物品包裹在另一个div中，使用130px的填充顶部或底部或填充底部和顶部65px给它100％高度。这样，您甚至可以垂直放置元素。