html - 容器高度 100% - px

Question

我正在尝试做一个简单的结构。

页眉（35px 高度）、容器（100% 高度）和底部（也是 35px 高度）。

为此我正在使用height: calc(100% - 72px); height: -webkit-calc(100% - 72px); height: -moz-calc(100% - 72px)，但它不适用于 Safari v5 和 IE ...

http://jsfiddle.net/2kng68pa/

我也尝试magin-top过，但是……这是浪费时间。

拜托，有人可以帮助我吗？我需要与 jsfiddle 相同的结果，但与 IE 和 Safari V5 兼容...

提前致谢。

Answer 1

如果 header 和 bottom 是固定高度，那么剩下的就很简单了：

html,
body { height:100%; }
* { box-sizing: border-box; margin:0; padding:0; }
header,footer { height: 35px; background: #0ff; color: #fff; position:absolute; left:0; right:0;}
header { top:0; }
footer { bottom:0; }
.container { background: #0f0; height: 100%; padding: 35px 0;}

<header>Header</header>
<div class="container">
  Container
  </div>
<footer>Footer</footer>