相关疑难解决方法(0)

<!-- Container Div -->
<div layout-fill>
    <!-- Image Div -->
    <div layout="column" layout-align="center center" class="coverImage" layout-fill>
        <md-content class="md-padding">
            Sample Text Here
        </md-content>
        <md-button class="md-raised md-primary">Sign Up</md-button>
    </div>
</div>

我有上面的HTML部分,我正在尝试使用Angular Material的flexbox支持来创建一个页面,其背景图像是整页.在此图像上叠加了一些文本和位于图像中心的按钮.

如果我检查chrome中最外层的div,它的大小(如预期的那样)是全屏.由于某种原因,图像div不会这样做.它只占用足够的空间来包含文本和按钮.任何关于为什么会发生这种情况的见解将不胜感激.我知道这可以通过几种不同的方式使用各种css技巧来完成,但我想了解关于flex如何工作的缺失.

更新JSFiddle的
链接