Боковая панель при перемещении из компонента приложения в отдельный компонент в Angular не имеет полной высоты страницы при прокрутке страницы вниз - PullRequest
Новая
       29

Боковая панель при перемещении из компонента приложения в отдельный компонент в Angular не имеет полной высоты страницы при прокрутке страницы вниз

0 голосов
/ 20 января 2020

Я использую боковую панель как отдельный компонент в моем angular приложении. До перемещения его в отдельный компонент содержимое было частью страницы html компонента приложения, и когда страница прокручивалась вниз, боковая панель занимала всю высоту страницы, и у меня не было проблем. После того как я переместил содержимое в отдельный компонент и использовал этот компонент внутри компонента приложения, боковая панель не занимает всю высоту страницы, когда содержимое прокручивается вниз, как показано на снимке экрана ниже

enter image description here

Код на боковой панели html боковой панели файла. 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 боковой панели файла.s css равен 

#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.s css равен 

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

#page-content {
   width: 100%;
   padding: 0px;
   min-height: 100vh;
   transition: all 0.3s;
}

Я не понимаю, почему это происходит. Пожалуйста, помогите мне с этим.

1 Ответ

1 голос
/ 20 января 2020

Поскольку для минимальной высоты #sidebar установлено значение 100vh, высота боковой панели будет составлять ровно 100% от высоты текущего вида и не будет дальше go. (текущим видом является высота вашего браузера)

Чтобы это исправить, вам просто нужно установить высоту #sidebar равной 100%, чтобы боковая панель имела такую ​​же высоту, как и ее родитель (в вашем случае <div class="wrapper">...

Надеюсь, это поможет

...