元素不在角材料中填充父元素

Question

我正在构建一个旨在用于移动设备的移动应用。我从角度材料开始sample application开始，并开始根据我的需要进行修改。我现在想要的是拥有一个带全屏画布的页面。

问题在于我无法弄清楚如何使画布填满整个屏幕。问题在这里显示（红色部分是画布）：

我在画布上有样式：

#gameCanvas{
    width: 100%;
    height: 100%;
    background-color: red;
    color: red;
}

但由于某种原因，这不起作用。

我有一个CodePen here。

Answer 1

md-content是一个相对元素。因此，为了使画布使用100％的可用空间，您可以使用此css代替：

#gameCanvas{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    background-color: red;
    color: red;
}

这里是分叉的CodePen

更新2015-03-24

真正的angular-material方法是使用这样的布局指令：

<md-content flex id="content" layout="column" layout-padding style="background-color: blue">
  <canvas layout-fill id="gameCanvas" flex></canvas>
</md-content>

您还应该考虑使用layout-padding指令而不是自己添加。

这是新CodePen。