javascript - 为什么 height: calc(100% - 100px) 不起作用

Question

JsFiddle 我正在尝试将测试 div 的高度设置为 calc(100%-100px)。为什么它不工作。

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

Answer 1

运算符+和-前后都需要空格。尝试calc(100% - 100px).使用*不需要空格的运算符。calc(100%(1/15))

Answer 2

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

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

Answer 3

为什么有多种heightcss 样式#wrap？

尝试起飞height: auto !important;

http://jsfiddle.net/UaYfW/53/

Answer 4

下面的代码将帮助您修复 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>

工作示例：http: //jsfiddle.net/UF3mb/603/