Проблема при попытке заполнить вертикальное пространство на странице

Question

Я пытаюсь заполнить вертикально все пространство на странице, используя @ angular / flex-layout.

Я использую fxFill и fxFlex для построения макета. Кажется, это нормально, когда я размещаю объекты по горизонтали, но я не могу найти способ заполнить страницу вертикально. Вот моя самая простая версия.

Следующая треска правильно заполняет весь горизонтальный сок.

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

Но следующий кодо не заполняет все пространство по вертикали:

<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% больше высоты области просмотра.

Вот пример с 300 на 300, содержащий div для каждого примера макета:

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