Javascript 为什么高度：calc（100%-100px）不工作

我试图将测试div的高度设置为calc（100%-100px）。为什么它不起作用

.test {
  height: calc(100%-100px);
 }

---

为什么

#wrap

有多个

高度

css样式

尝试起飞<代码>高度：自动！重要的

---

运算符

+

和

-

在前后都需要空格。尝试

calc（100%-100px）。

使用

*

操作符，您不需要空格，例如

calc（100%（1/15））

下面的代码将帮助您确定div的高度。div{height:calc（100%-（20px+30px））；} 工作代码如下：

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代码：

<header>Some nav stuff here</header>

<h1>This is the heading</h1>

<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>

这里有些导航设备
这是标题
此块的CSS calc（）高度必须为100%——其他元素的高度。

---

工作示例：

您可以使用100vh代替100%。 vh=视口高度的1%

.test {
  height: calc(100vh - 100px);
}

---

如果你不知道它应该做什么，“不工作”是没有意义的。你期望发生什么？我更新了小提琴。Sorry您是否正在使用支持calc（）的浏览器进行测试？是的，我正在使用支持calc（）的浏览器进行检查，作为旁注，您不能将

作为元素

，

或

bootstrap 3文档的粘性页脚代码类似。我复制了相同的设置，使我的页脚粘在屏幕底部看起来就像粘在屏幕底部一样，使用

#wrap{height:100%；}

，没有？尝试最小化浏览器的高度。您将获得代码中该部分的效果。如果浏览器高度小于100px，则页脚将隐藏。但是如果我删除了代码的那一部分，包裹区域就会被隐藏，页脚会占据所有的空间。你对此有什么解决办法吗？这是一个真正的问题吗？如果不花时间弄清楚为什么会发生这种情况，我就无法解决这个问题。这似乎不是一个值得花时间解决的现实问题。非常感谢你，但这让我很开心！