当页面向下滚动时，从应用程序组件移至Angular中的单独组件时，侧栏没有页面的完整高度

Question

我在侧角应用程序中使用侧边栏作为单独的组件。在将其移动到单独的组件之前，内容是应用程序组件的html页面的一部分，并且当页面向下滚动时，边栏曾经占据了页面的全部高度，并且我没有任何问题。将内容移动到单独的组件并在应用程序组件内部使用该组件后，内容向下滚动时，如下面的屏幕截图所示，边栏不会占据页面的整个高度。

[侧边栏html文件sidebar.html中的代码为

<nav *ngIf="isLoggedIn$ | async" id="sidebar" [ngClass]="{active: (isShown$ | async)}">
<div class="sidebar-header">
    <h2>Test Portal</h2>
</div>

<ul class="items">
    <li [routerLink]="['/car-list']" routerLinkActive="active" title="Cars">
        <a>
            <fa-icon [icon]="faLayerGroup"></fa-icon><span id="spnCars">Cars</span> 
        </a>
    </li>
    <li [routerLink]="['/bike-list']" routerLinkActive="active" title="Bikes">
        <a>
            <fa-icon [icon]="faUsers"></fa-icon><span id="spnBikes">Bikes</span>
        </a>
    </li>
</ul>
</nav>
CSS文件sidebar.scss中的代码是

#sidebar {
  font-family: 'Poppins', sans-serif;
  min-width: 200px;
  max-width: 200px;
  min-height: 100vh;
  background: #7386D5;
  color: #fff;
  transition: all 0.3s;
}

#sidebar .sidebar-header {
  padding: 15px 30px 10px 20px;
}

#sidebar ul.items {
  padding: 20px 0;
  border: none;
}

#sidebar ul li {
  outline: none;
  a {
    padding: 10px 20px;
    font-size: 1.1em;
    display: block;
    cursor: pointer;
  }
} 

#sidebar ul li a:hover {
  color: #7386D5;
  background: #fff;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
  color: #fff;
  background: #5569c3;
}

#sidebar.active {
  margin-left: -200px;
}

a, a:hover, a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

@media (max-width: 768px) {
  #sidebar {
     margin-left: -200px;
  }
  #sidebar.active {
     margin-left: 0;
  }
}

#spnCars {
  padding-left: 14px;
}

#spnBikes {
  padding-left: 10px;
}
app.component.html文件中的代码如下所示。下面代码中的“ app-sidebar”是我放置侧边栏内容的位置。

<div class="wrapper">
<app-sidebar></app-sidebar>

<!-- Page Content -->
<div id="page-content">

    <div id="content">
        <router-outlet></router-outlet>
    </div>
</div>

CSS文件app.component.scss为

.wrapper {
   display: flex;
   width: 100%;
   align-items: stretch;
}

#page-content {
   width: 100%;
   padding: 0px;
   min-height: 100vh;
   transition: all 0.3s;
}
我不明白为什么会这样。请帮我解决这个问题。

我在侧角应用程序中使用侧边栏作为单独的组件。在将其移动到单独的组件之前，该内容是应用程序组件的html页面的一部分，当页面向下滚动时，...

Answer 1

由于您仅将#sidebar的最小高度设置为100vh，因此sidebar的高度将恰好是当前视图高度的100％，并且不会超出该范围。 （当前视图为浏览器的高度）