Как обратиться к высоте родительского компонента?

Question

dmitriu256 @dmitriu256

Angular

Как обратиться к высоте родительского компонента?

Как дочерний компонент (app-login) растянуть на 100% по высоте main в родительском компоненте (app-root). App-login вызывается через router-outlet.

Точнее Как router-outlet растянуть по высоте на высоту main?

Понимаю, что стили одного компонента изолированы от стилей другого компонента.
Возможно ли каким то способом достучаться до стилей родительского компонента?
Насколько верна разметка в app-root?

Как хотел решить проблему:
1. Из компонента login достучаться до стилей компонента app-root и извлечь высоту main
2. Главной секции из login компонента присвоить высоту в 100%

Разметка app-root

<header>
  <app-header></app-header>
</header>

<main>
  <router-outlet></router-outlet>
</main>

<footer>
 <div class="container">
   <div class="row">
     <div class="col-12">
       Футер
     </div>
   </div>
 </div>
</footer>

Стили app-root

header{
  height: 72px;
}

main{

  min-height: calc(100vh - 172px);
  border:5px solid grey;
}

footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  border:3px solid red;
  background: aqua;
}

Глобальный стиль styles.css

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 100px;
}

Разметка дочернего компонента login

<section id="login">
  <div class="container">
    <div class="row">
      <div class="col-6 offset-3">
        <div class="card">
          <div class="card-body">
            <h1 class="text-center"><span class="text-primary">Авторизация</span></h1>
            <form novalidate #form = "ngForm" (ngSubmit)="onSubmit()">
              <div class="form-group">
                <label for="email">Email</label>
                <input type="text" class="form-control" id="email" [(ngModel)]="email" required name="email">
              </div>
              <div class="form-group">
                <label for="password">Password</label>
                <input type="text" class="form-control" id="password" [(ngModel)]="password" required name="password">
              </div>
              <button class="btn btn-primary btn-block mybtn">Login</button>
            </form>
            <button id="facebook" class="btn btn-danger btn-block mybtn" (click)="onFacebook()">Авторизация Facebook</button>
          </div>
        </div>
      </div>
    </div>
  </div>
 gtgtg
</section>

Стили дочернего компонента login

#login{
  position: relative;
  height: 100%;
  background: #563D7C;
  border:4px solid yellow;

}
.card{
  margin-top: 30px;
}
.mybtn{
  margin-top:10px;
}

Скриншот проблемы:

Буду благодарен за помощь!