Angular 2 弹性布局高度 100%

Question

使用 Material 设计和弹性布局的 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>

希望对您有所帮助。马西