Как установить ширину на 100% от текущей розетки маршрутизатора? - PullRequest
Новая
       12

Как установить ширину на 100% от текущей розетки маршрутизатора?

2 голосов
/ 28 апреля 2019

На моем веб-сайте есть строка меню, которая находится в html основного компонента, и внутри этого html также находится селектор приложений другого компонента:

MainComponent.html 

<div style="height:200px">This is my Menubar</div>
<app-test></app-test>

Я хотел бы отобразить 3 поля в моем testComponent.html.

Я использую flexLayout: https://github.com/angular/flex-layout

 <div fxLayout="column" fxLayoutAlign="space-between none" style="height: 100%">
   <div style="background-color: red">
    T1
  </div>
  <div style="background-color: blue">
    T2
  </div>
  <div style="background-color: yellow; height: 200px">
    T3
  </div>
 </div>

Проблема заключается в том, что, поскольку существует строка меню, яполучить режим прокрутки, но я просто хочу, чтобы последний блок заканчивался в нижней части экрана.Смотрите здесь: http://prntscr.com/nhwcbp

Как мне этого добиться?

https://stackblitz.com/edit/flex-layout-angular-material-xssepa

1 Ответ

1 голос
/ 29 апреля 2019
  1. поставить ниже стиль в style.css:

html, body { height: 100%; width: 100%; margin: 0; }

Удалите height: 100vh и используйте flexbox 
<div fxLayout="column" style="height:100%">
    <div fxLayout="row" fxLayoutAlign="center">
        <mat-card fxFlex="50">
            <div fxLayout="row">
                <div fxFlex="30" class="action-blurb">This is a blurb.</div>
                <div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
                <div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
            </div>
        </mat-card>
    </div>
    <div fxFlex="">
        <app-test></app-test>
    </div>
</div>

Я надеюсь, что это должно сработать согласно этой демонстрации

...