集装箱高度100% - px

时间:2014-11-12 22:27:31

标签: html css calc

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

标题(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兼容......

提前致谢。

1 个答案:

答案 0 :(得分:1)

如果标题和底部是固定高度,那么其余部分很容易:

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>