Is there a way to make this angular8 component fill the entire height of the screen?
https://i.sstatic.net/JIupj.png
In the Root Style.scss file, the following code is present:
html, body, app-root {
min-height: 100vh;
height: auto;
margin: 0;
}
The left green bar (DIV) should stretch to the full 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 on the page, which includes home and notifications (grey), has the following styling:
.home-container {
width: calc(100% - var(--nav-left-w)); // to prevent horizontal scrolling;
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>
<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>
</div>Any suggestions on how to get the green bar to occupy the entire height of the screen would be greatly appreciated.
Thank you.