Angular 角度2柔性布局高度100%

使用材料设计和柔性布局的角度应用程序。

我试图创建一个简单的页面布局，上面有两列（左=填充，右=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>

这里发生了一些事情


项目1
项目2

底部元素

结果:

---

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

---

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

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

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

...

我希望这有帮助。 Masi

对于希望在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填充，文本在末尾对齐

第二种情况 类似于1号。但是文本在中心对齐

底部元素：此div已填充，文本位于中间

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

如果这就是你想要的，那么以下是变化：

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

底部元素：该div仅为20，与底部对齐

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

---

更新日期：2020年10月6日：今天重新审视我的答案，意识到提及角度版本似乎无关紧要；此外，该解决方案还“依赖于flex”。我已经从答案中删除了Angular的版本。

我想它没有什么问题。。我假设如果元素总数达到100%，那么该列将填充屏幕高度的100%，但事实并非如此。它们只占父对象的100%，如果没有固定值，父对象的大小将与其内容相同。现在我对它进行了更多的思考，这很有意义。很好的例子！感谢您花时间添加示例。

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