具有粘性页眉和页脚以及动态内容高度的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;
}