calc() 在 CSS3 中无法正常工作答案

【问题标题】：calc() not working properly in CSS3calc() 在 CSS3 中无法正常工作
【发布时间】：2014-10-23 15:21:31
【问题描述】：

我正在尝试制作一个高度为 100% - 130px 的 div；

代码是：

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

当我使用浏览器控制台（检查元素）编辑它时，它运行良好。但是当我在代码中应用相同的内容时，它会显示 calc(-30%);因此，内容不可见。

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

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

【问题讨论】：

演示会很有用，但可能是父级没有声明的高度。
对不起 webkit。我已经更新了它。很快就会添加演示。
unprefixed 属性应该排在最后：它始终是浏览器支持的最后一个，具有最新的声明方式，并且前缀版本可以被视为后备（例如 flexbox 和渐变演变了两次，所以 3 个版本至少，叹息）
请在此处查看问题演示。 jsfiddle.net/enworl/bqgj0rsy
你想要jsfiddle.net/bqgj0rsy/2这样的东西吗？

标签： css calc

【解决方案1】：

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

在 your case 中，.element1 有一个无法识别的 height 或 100%。给这个元素设置一个真实的高度，你会看到预期的输出。

例如：

.element1 {
    height :200px;
}

【讨论】：

【解决方案2】：

将您的项目包装在另一个 div 中，将其设置为 100% 高度，顶部或底部填充为 130 像素或底部和顶部填充为 65 像素。这样您甚至可以垂直放置元素。

【讨论】：