How can I make this angular8 component fill the whole height?

Question

How can I make this angular8 component fill the whole height?

The Root Style.scss has this

 html, body, app-root {
  min-height: 100vh;
  height: auto;
  margin: 0;
 }

The left green bar (DIV) needs to fill the height of the screen

 .nav-left-container {
  width: var(--nav-left-w) // 6rem;
  height: 100vh;
  background-color: var(--col-green-blue);
  position: absolute;
  top: 0;
  left: 0;
 }

HTML

 <div class="nav-left-container"> <div class="nav-logo-container d-flex justify-content-center align-items-center"> <a [routerLink]="['/home']" routerLinkActive="" (click)=toHome()><img class="nav-logo-img"" alt=" "></a> </div> <div class="navigation-container d-flex justify-content-start align-items-center flex-column"> <div class="home d-flex justify-content-center align-items-center mt-4 mb-5"> <a [routerLink]="['/home']" routerLinkActive="" tooltip="Home" placement="right" (click)="toHome()"><img class="nav-link-img" src="../../../assets/images/ui/home.png" alt="home"></a> </div> <div class="search d-flex justify-content-center align-items-center mb-5"> <a [routerLink]="['/products']" routerLinkActive="" tooltip="Search" placement="right" (click)="toSearch()"><img class="nav-link-img" src="../../../assets/images/ui/barcode_search.png" alt="search"></a> </div> <div class="history d-flex justify-content-center align-items-center mb-5"> <a [routerLink]="['/history']" routerLinkActive="" tooltip="History" placement="right" (click)="toHistory()"><img class="nav-link-img" src="../../../assets/images/ui/history.png" alt="history"></a> </div> <div class="settingsd-flex justify-content-center align-items-center mb-5"> <a [routerLink]="['/settings']" routerLinkActive="" tooltip="Settings" placement="right" (click)="toSettings()"><img class="nav-link-img" src="../../../assets/images/ui/settings.png" alt="settings"></a> </div> </div> </div>

The main container of the page (home and notifications (grey) have this

.home-container {
  width: calc(100% - var(--nav-left-w)) // to avoid horizontal scroll;
  height: 100vh;
  margin-left: 6rem;
}

HTML

 .home-container { width: calc(100% - var(--nav-left-w)); height: 100vh; margin-left: 6rem; }

 <app-nav-top></app-nav-top> <div class="container-fluid home-container"> <div class="row"> <div class="col-md-9"> <div class="row mt-4"> <div class="col"> <div class="find-resource-wrapper mt-4"> <a (click)="onFindResource()"> <h1>Find a resource <fa-icon [icon]="faSearchPlus"></fa-icon> </h1> </a> <hr> <div class="find-resource-display-wrapper"> <app-resource-list></app-resource-list> </div> </div> </div> </div> <!-- end find resource --> <div class="row mt-4"> <div class="col"> <div class="offer-resource-wrapper"> <a> <h1>Offer resource <fa-icon [icon]="faSearchPlus"></fa-icon> </h1> </a> <hr> </div> </div> </div> <!-- end offer resource --> <div class="row mt-4"> <div class="col"> <div class="cycles-wrapper"> <a> <h1>Cycles <fa-icon [icon]="faRecycle"></fa-icon></h1> </a> <hr> </div> </div> </div> <!-- end cycles --> </div> <!-- end main left --> <div class="col-md-3 notification-area"> <div class="row"> <div class="col"> <div class="mt-4">Logged in as</div> <div> <fa-icon [icon]="faEnvelope"></fa-icon> {{email}} </div> </div> </div> </div> </div> <!-- end notification --> </div> <!-- end home-container --> <app-nav-left></app-nav-left>

How can I get the green bar to fill the whole height of the screen?

Thank you in advance.

Answer 1

try to make change in your css I am sure it will work.

.nav-left-container {
      width: var(--nav-left-w) // 6rem;
      background-color: var(--col-green-blue);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
}