css - 如何让这个 angular8 组件填满整个高度？

Question

如何让这个 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>

如何让绿色条填满屏幕的整个高度？

提前致谢。

Answer 1

尝试更改您的 css，我相信它会起作用。

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