angularjs - 元素未在角材料中填充父级

Question

我正在构建一个旨在用于移动设备的移动应用程序。我从 angular material-start示例应用程序开始，并开始根据我的需要对其进行修改。我现在想要的是有一个带有全屏画布的页面。

问题是我不知道如何让画布填满整个屏幕。问题显示在这里（红色部分是画布）：

我在画布上有这样的样式：

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

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

我这里有一个 CodePen 。

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。