javascript 角度材料：布局填充不填充父 <div>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29002473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Material: layout-fill not filling parent <div>
提问by mtaliaf
<!-- 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>
I have the above section of HTML, and I'm trying to use Angular Material's flexbox support to create a page that has a background image that is the full page. Overlayed on this image is some text and a button that is in the center of the image.
我有上面的 HTML 部分，我正在尝试使用 Angular Material 的 flexbox 支持来创建一个具有完整页面背景图像的页面。覆盖在该图像上的是一些文本和一个位于图像中心的按钮。
If I inspect the outermost div in chrome it's size is (as expected) the full screen. The image div for some reason does not do this. It only takes up enough space to contain the text and button. Any insights on why this is happening would be appreciated. I know that this can be done in several different ways using various css tricks but I would like to learn what im missing about how flex works.
如果我在 chrome 中检查最外面的 div，它的大小是（如预期的）全屏。由于某种原因，图像 div 没有这样做。它只占用足够的空间来包含文本和按钮。任何有关为什么会发生这种情况的见解将不胜感激。我知道这可以使用各种 css 技巧以几种不同的方式完成，但我想了解我对 flex 工作原理的遗漏。
Update
Link to JSFiddle
更新
到JSFiddle 的链接
回答by kavare
I guess the fundamental issue comes from using both layout-alignand layout-fillin the same parent container.
我想根本问题来自于在同一个父容器中同时使用layout-align和layout-fill。
Solutions
解决方案
In short, there are 2 ways to overcome this:
简而言之，有两种方法可以克服这个问题：
Add a custom css rule on parent container with
align-items: stretch;Use only
layout-fill(nolayout-alignon the parent container)
在父容器上添加自定义 css 规则
align-items: stretch;仅使用
layout-fill（不在layout-align父容器上使用）
Reasons
原因
Whenever using layout-*directive, angular-material would add a class to the element, and apply flex layout related styles there. For example:
每当使用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>
Will be compiled to :
将被编译为：
<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>
And the resulting css would be:
由此产生的 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%;
}
As you can see here, layout-filldoes not change anything in flex related-rules at all.
正如您在此处看到的，layout-fill根本不会更改 flex 相关规则中的任何内容。
What we expect for a stretched flex item should leverage on align-items: stretchas mentioned in this A Complete Guide to Flexboxby CSS-tricks. But this simply is not the case for angular material implementation. And it make sense because align-itemrule is already being used in layout-align-*as a way to position the item.
align-items: stretch正如CSS-tricks 的A Complete Guide to Flexbox 中提到的，我们对拉伸的 flex 项的期望应该利用。但这根本不是角度材料实现的情况。这是有道理的，因为align-item规则已经被用作layout-align-*定位项目的一种方式。
Examples
例子
Check this codepen exampleto see how it works.
检查这个codepen 示例以了解它是如何工作的。
回答by nitin
<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>
and add this to yr CSS
并将其添加到 yr 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;
}
回答by hkjels
A bit late You need to add "layout"-attribute to the div where your layout-fill is.
有点晚了您需要向布局填充所在的 div 添加“布局”属性。
