Компонент Angular 2 с липким верхним и нижним колонтитулами и динамической высотой содержимого

Question

Я пытаюсь создать компонент с липким верхним и нижним колонтитулами, в то время как высота содержимого является динамической. Я попытался использовать пример FIDDLE (внизу этого поста), но поведение не то же самое. Когда я изменяю размер экрана, окно просто запускается поверх нижнего колонтитула / заголовка.

Вот чего я пытаюсь достичь:

Пример кода FIDDLE: http://jsfiddle.net/PGC7D/18/

    html,body
{
    height: 100%;
}
header,footer,div
{
   width: 100%; 
}
.container
{
    height: 100%;
    background: pink;
    margin: -64px 0 -30px;
    padding: 64px 0 30px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#content {
    overflow:auto;
    height:100%;
}
.block
{
    width: 50%;
    height: 50%;
    display: inline-block;
    border: 1px solid yellow;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}
header
{
    height: 64px;
    background: purple;
    position: relative;
    z-index:1;
}
footer
{
    height: 30px;
    background: gray;
    position: relative;
    z-index:1;
}