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

Question

我在 angular 应用程序中将边栏用作单独的组件。在将其移动到单独的组件之前，内容是应用程序组件 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;
}

我不明白为什么会这样。请帮我解决这个问题。

Answer 1

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

要解决此问题，您只需将#sidebar 的高度设置为 100% 以使侧边栏与其父级具有相同的高度（在您的情况下 <div class="wrapper">...

希望对您有所帮助

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

Sidebar when moved from app component to a separate component in Angular doesn't have full height of the page when the page scrolls down

html

css

sass

angular-components

angular