[英]How can I make this angular8 component fill the whole height?
如何讓這個 angular8 組件填滿整個高度?
Root Style.scss 有這個
html, body, app-root {
min-height: 100vh;
height: auto;
margin: 0;
}
左邊的綠條(DIV)需要填滿屏幕的高度
.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>
頁面的主容器(主頁和通知(灰色)有這個
.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>
如何讓綠色條填滿屏幕的整個高度?
先感謝您。
嘗試更改您的 css 我相信它會起作用。
.nav-left-container {
width: var(--nav-left-w) // 6rem;
background-color: var(--col-green-blue);
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.