Angular Material：布局填充未填充父 <div>

Posted 2023-03-06

【中文标题】Angular Material：布局填充未填充父 <div>

【英文标题】：Angular Material: layout-fill not filling parent <div>

【发布时间】：2015-05-14 04:17:00

【问题描述】：

<!-- 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

【问题讨论】：

为此做一个小提琴。

我认为我设置正确....link

这是你的新小提琴：jsfiddle.net/1tap45pp/9

如果您喜欢目前有 6 个赞的答案。你可能想接受它。通过这样做，你是在奖励他的努力。以下是方法和原因：***.com/help/someone-answers

【参考方案1】：

我想根本问题来自于在同一个父容器中同时使用 layout-align 和 layout-fill。

解决方案

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

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

仅使用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 相关规则中的任何内容。

我们对拉伸的 flex 项目的期望应该利用 align-items: stretch，正如 CSS-tricks 在 A Complete Guide to Flexbox 中提到的那样。但这根本不是角度材料实现的情况。这是有道理的，因为align-item 规则已经在layout-align-* 中用作定位项目的一种方式。

示例

查看此codepen example 以了解其工作原理。

【讨论】：

谢谢@kavare .... angular material 网站上没有关于 layout-fill 、 layout-wrap 做什么的解释......或者它如何转换为代码..所以这很有帮助

【参考方案2】：

<div layout-fill>
<img src="" class="bg" ></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;

【讨论】：

感谢您的回复。就像我说的，我知道有很多替代方法可以写这个，如果我只是想让所有东西都正确渲染的话。我主要关心的是为什么图像 div 上的布局填充没有填充父 div。换句话说，我希望了解为什么它不能按原样工作，而不仅仅是解决问题。

我出去了，抱歉回复晚了。在 yr 情况下，您需要在 css 中的 yr layout-fill 类中添加“position:absolute”。

【参考方案3】：

有点晚了? 您需要将“布局”属性添加到布局填充所在的 div。