Container height 100% - px

Question

I'm trying do a simple structure.

Header (35px height), container (100% height) and Bottom (35px height too).

For this I'm ussing height: calc(100% - 72px); height: -webkit-calc(100% - 72px); height: -moz-calc(100% - 72px), but it doesn't works with Safari v5 and IE ...

http://jsfiddle.net/2kng68pa/

Also I was try do with magin-top too but... It was a lost of time.

Please, someone can help me? I need the same result as jsfiddle but compatible with IE and Safari V5 ...

Thanks in advance.

Answer 1

If the header and bottom are a fixed height, then the rest is easy:

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>