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

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;
}