height: calc(100%) 在 CSS 中无法正常工作

我有一个 div，我想填充主体的整个高度减去设定的像素数。但我无法得到height: calc(100% - 50px)上班。

我想这样做的原因是我有一些元素具有基于一些不同标准的动态高度，例如标题的高度根据它可以包含的不同元素而变化。然后，内容 div 需要拉伸以填充剩余的可用空间。

然而，div 元素保持内容的高度 - 它似乎没有将 100% 解释为 body 元素的高度。

body {
  background: blue;
  height: 100%;
}

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: calc(100% - (20px + 30px));
  display: block;
}

<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>

我将不胜感激任何帮助或正确方向的指示。

您需要确保 html 和 body 设置为 100%，并确保添加 calc 的供应商前缀，例如 -moz-calc、-webkit-calc。

以下 CSS 有效：

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 和 body 上的边距/填充设置为 0，否则添加此功能时会出现滚动条。

这是更新的小提琴

http://jsfiddle.net/UF3mb/10/ http://jsfiddle.net/UF3mb/10/

浏览器支持是： IE9+、Firefox 16+ 以及带有供应商前缀的 Firefox 4+、Chrome 19+、Safari 6+