角度2柔性布局高度100%

Question

使用Material设计和flex-layout的Angular app. 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>

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

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

第 3 种情况 底部 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%可能是确实如此.高度是动态的,因此它将适应您的内容.在您的情况下,内容不会填充页面,因此这是正常的行为.

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