角度材质:布局填充不填充父<div>

Question

<!-- 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的
链接

Answer 1

我想根本的问题来自于同时使用layout-align,并layout-fill在同一个父容器.

解决方案

简而言之,有两种方法可以解决这个问题:

1. 在父容器上添加自定义css规则 align-items: stretch;

2. 仅使用layout-fill(layout-align父容器上的否)

原因

每当使用layout-*指令时,angular-material都会向元素添加一个类,并在那里应用与flex布局相关的样式.例如:

<div class="parent" layout="row" layout-align="space-between center" layout-fill> 
  <div class="child child-1" flex>
  <div class="child child-2" flex="none">
</div>

将编译为:

<div class="parent layout-fill layout-align-space-between-center layout-row" layout="row" layout-align="space-between center" layout-fill> 
  <div class="child child-1 flex" flex>
  <div class="child child-2 flex-none" flex="none">
</div>

由此产生的CSS将是:

.layout {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.layout-row {
    flex-direction: row;
}

.layout-align-space-between-center {
    align-items: center;
    align-content: center;
    max-width: 100%;
    justify-content: space-between;
}

.layout-fill {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}

正如您在此处所看到的,layout-fill根本不会改变flex相关规则中的任何内容.

我们期待一个拉伸弯曲项目应充分利用上align-items: stretch,因为这在提及一个完整的指南了flexbox通过CSS-技巧.但对于角度材料实施而言,情况并非如此.这是有道理的,因为align-item规则已经被用作layout-align-*定位项目的方式.

例子

检查此codepen示例以查看其工作原理.

Answer 2

<div layout-fill>
<img src="" class="bg" alt="image you want in background"></img>
<div layout="column" layout-align="center center">
    <md-content class="md-padding">
        Sample Text Here
    </md-content>
    <md-button class="md-raised md-primary">Sign Up</md-button>
</div>
</div>

并将其添加到您的 CSS 中

  img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}