Angular 2 弹性布局高度 100%

Question

使用 Material design 和 flex-layout 的 Angular 应用。 https://github.com/angular/flex-layout

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

<div fxLayout="column">
  <div fxLayout="row" fxFlex="90%">
    <div fxFlex="80%" class="border">
      <p>Stuff is happening here</p>
    </div>
    <div fxFlex="20%" class="border">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  </div>
  <div fxLayout="row" fxFlex="10%" class="border">
    <p>Bottom element</p>
  </div>
</div>

结果：

Answer 1

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

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

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

Answer 2

对于希望在 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>

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

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

Stackblitz Playground https://stackblitz.com/edit/stackoverflowcom-questions-41665737-angular-2-flex-layout-hei?file=src/app/app.component.html

可能会帮助某人在更高版本的 Angular 中访问它。

2020 年 10 月 6 日更新：今天重新审视了我的答案，并意识到对 Angular 版本的引用似乎无关紧要；该解决方案还“依赖于弹性”。我已经从答案中删除了 Angular 的版本。

Answer 3

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

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