使用CSS3计算值

Question

有没有办法在CSS3中实现这个目的？：

height: 100% -110px;

我的背景：

Answer 1

你不能用纯CSS来编写它。 （它不适用于Litek所提到的所有浏览器）但是有一种组织方式来处理这个问题，但你需要将元素包装在另一个中：

body {
  height; 100%;
  padding: 0 0 20px;
}

div#wrap {
  background: #fff;
  height: 100%;
  padding: 0 0 20px;
  margin: 0 0 -20px;
}

div#wrap div { //this would be your actual element
  height: 100%;
  background: pink;
}

Answer 2

你想要使用的是calc()，它正在加入FF和可行的webkit，但不要指望它很快得到广泛的支持。

至于你的例子，也许sticky footer会为你带来一些启发。

---

修改

如今它受到主流浏览器的支持：

http://caniuse.com/calc

Answer 3

直接就像我不知道广泛采用的任何功能。

但是有一种简单的方法可以达到这种效果。

将所有元素放入容器中＆lt; div＆gt; 'height：100％'，此容器应具有相对位置，以便您可以将其他元素相对于其位置定位在其中。将标题置于顶部，页脚位于底部，绝对定位，并使用javascript计算内容div必须具有的高度。

您还可以订阅'window.onResize'事件，以便在调整窗口大小时重新计算。

我知道这不是一个干净利落的解决方案，但几乎可以在任何浏览器中使用。

Answer 4

在上下文中给出了第二个div高度值并不重要。实际上，重要的是 div开始的地方和结束的地方。

换句话说，height = vertical end - vertical start：

#div2 {
    position:absolute;
    top:90px;/*20+50+20*/
    bottom:20px;
}

http://jsfiddle.net/cGwrw/3/