컨테이너 높이 100 % - px

Question

간단한 구조로 노력하고 있습니다.

헤더 (35px 높이), 컨테이너 (100 % 높이) 및 하단 (35px 높이).

내가 height: calc(100% - 72px); height: -webkit-calc(100% - 72px); height: -moz-calc(100% - 72px)을 ussing있어이 들어

하지만 사파리 V5와 IE에서 작동하지 않습니다 ...

http://jsfiddle.net/2kng68pa/

또한 너무 magin-top로 할 시도했지만 그것은을했다 ... 시간 낭비.

누군가 나를 도울 수 있습니까? jsfiddle와 같은 결과가 필요하지만 IE와 Safari V5와 호환됩니다.

미리 감사드립니다. 머리글과 바닥 높이가 고정 인 경우

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