Question

我正在尝试使用@ angular / flex-layout垂直填充页面中的所有空间。

我正在使用fxFill和fxFlex构建布局。垂直放置对象似乎没问题，但找不到垂直填充页面的方法。这是我最简单的版本。

下面的鳕鱼可以正确地填充所有的垂直空间。

<div fxFill>
    <label >
        First item
    </label>
    <label fxFlex>
        Second item
    </label>
    <label >
        Third item
    </label>
</div>

但是跟随codo并不能垂直填充所有空间：

<div fxLayout="column" fxFill>
    <label >
        First item
    </label>
    <label fxFlex>
        Second item
    </label>
    <label >
        Third item
    </label>
</div>

Answer 1

您必须将html和body的高度设置为100％才能生效。由于该指令将width: 100%; height: 100%样式应用于容器，因此您的页面将是视口高度的200％。

下面是一个示例，其中每个布局示例的div均为300 x 300：

html, body {
  height: 100%;
}

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 10px;
}

<div class="container">
  <div fxFill>
    <label>
        First item
    </label>
    <label fxFlex>
        Second item
    </label>
    <label >
        Third item
    </label>
  </div>
</div>

<div class="container">
  <div fxLayout="column" fxFill>
    <label >
        First item
    </label>
    <label fxFlex>
        Second item
    </label>
    <label>
        Third item
    </label>
  </div>
</div>

这里是Stackblitz

尝试在页面中填充垂直空间时出现问题

1 个答案: