Angular 2 гибкая высота макета 100%

Angular, используя конструкцию материалов и гибкую компоновку. https://github.com/angular/flex-layout

Я пытаюсь создать простой макет страницы из 2-х столбцов сверху (left = fill, right = 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

Установка высоты до 100% - это, вероятно, путь. Высота динамическая, поэтому она будет адаптироваться к вашему контенту. В вашем случае содержимое не заполняет страницу таким образом, чтобы нормальное поведение.

Что не так с этим решением?

Ответ 2

Я только что наткнулся на этот вопрос, потому что у меня была похожая проблема, и я решил ее более согласованным образом, используя атрибут fxFlexFill библиотеки FlexLayout, без ручной настройки свойств CSS. В вашем конкретном случае вы бы включили атрибут fxFlexFill в первый элемент div следующим образом:

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

Надеюсь, это поможет. Масси

Ответ 3

Для тех, кто хочет сделать это в Angular 7, вот возможные варианты использования Flex. Из иллюстрации есть вопрос, я тд запутался по поводу требуемого вывода. Итак, я выкладываю все три сценария, снимки выходных данных и игровую площадку со стеком, чтобы вы могли попробовать.

1-й случай Нижний элемент div заполняется оставшейся высотой, а текст выравнивается по низу.

Если это то, что вам нужно, единственным изменением в коде является нижний раздел div

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

2-й случай Похоже на 1-й. Но текст выравнивается по центру

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

3-й случай Сам нижний блок выравнивается по низу и не заполняет оставшееся вертикальное пространство.

Если это то, что вы после, вот изменение:

<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.