css - calc() 在 CSS3 中无法正常工作

Question

我正在尝试制作一个高度为 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%); 因此，内容没有可见性。

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

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

Answer 1

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

在您的情况下，有.element1一个无法识别。为这个元素设置一个真实的高度，你会看到预期的输出。height100%

例如：

.element1 {
    height :200px;
}

演示

Answer 2

将您的项目包装在另一个 div 中，给它 100% 的高度，顶部或底部填充 130 像素或底部和顶部填充 65 像素。这样你甚至可以垂直定位你的元素。