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

为什么height有多个#wrap css样式？

尝试取消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/

为什么身高：calc（100％ - 100px）不起作用

4 个答案: