1

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

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

例子

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

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

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

这里有一个 CodePen 。

4

1 回答 1

2

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

于 2015-03-18T15:14:09.673 回答