angular material 中的元素未填充父项

Question

我正在构建一个旨在在移动设备上使用的移动应用程序。我从 angular material-start sample application 开始并开始根据我的需要修改它。我现在想要的是全屏一页canvas.

问题是我不知道如何让 canvas 填满整个屏幕。问题如图（红色部分为canvas）：

我在 canvas 上的样式是这样的：

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

但由于某些原因，这行不通。

我有一个 CodePen here。

Answer 1

md-content 是相对元素。因此，要使 canvas 使用 100% 的 space 可用，您可以使用此 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。

angular material 中的元素未填充父项

Element not filling parent in angular material

angularjs

angular-material