Question

使用Material设计和flex-layout的Angular app。 https://github.com/angular/flex-layout

我尝试在顶部创建一个2列的简单页面布局（左=填充，右= 10％），然后在屏幕底部创建一行。元素仍然只填充内容所需的垂直空间。我发现这样做的唯一方法是手动将高度设置为100％。这是我必须这样做的吗？这个html出了什么问题？

maxOfPlayers

结果：

Answer 1

将高度设置为100％可能是确实如此。高度是动态的，因此它将适应您的内容。在您的情况下，内容不会填充页面，因此这是正常行为。

这个解决方案有什么问题？

Answer 2

我偶然发现了这个问题，因为我遇到了类似的问题，并且我通过使用库FlexLayout的属性 fxFlexFill 以一种（我认为）更一致的方式解决了该问题，而无需手动调整CSS属性。在您的特定情况下，我将在第一个div元素中包含属性 fxFlexFill ，如下所示：

<div fxLayout="column" fxFlexFill>
    ...
</div>

我希望这会有所帮助。马西

Answer 3

对于希望在Angular 7中执行此操作的人，这里是使用Flex的可能输出。从插图中可以看出问题所在，我对要求的输出感到困惑。因此，我将布置所有三种情况，输出快照和一个stackblitz游乐场，供您尝试。

第一种情况 底部div填充剩余的高度，并且文本与底部对齐。

如果这是您要执行的操作，则代码中唯一需要的更改是底部div部分

<div fxFlex fxLayoutAlign="start end" class="bottom-div">
    BOTTOM ELEMENT: This div is filled and text is aligned in the end
</div>

第二种情况 类似于1st。但文字居中对齐

<div fxFlex fxLayoutAlign="start center" class="bottom-div">
BOTTOM ELEMENT: This div is filled and text is in center
</div>

第三种情况 底部div本身与底部对齐，并且不会填充剩余的垂直空间。

如果那是您想要的，请进行以下更改：

<div fxFlex="20" fxLayoutAlign="start center" class="bottom-div">
    BOTTOM ELEMENT: This div is just 20 and aligned to the bottom
</div>

可能会帮助访问Angular更高版本的人。