Блог

У меня есть мой основной компонент, который содержит 2 компонента. Навигационная панель и контейнер для розетки маршрутизатора.

 <div class="container">
  <app-navbar></app-navbar>
  <div class="router">
    <router-outlet></router-outlet>
  </div>
</div>
 

И css:

 .container {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 95fr 5fr;
  }
 

Маршрутизатор класса имеет высоту и максимальную высоту 100%. Кроме того .маршрутизатор занимает первую строку, а навигационная панель занимает вторую строку.

Внутри маршрутизатора у меня есть панель управления в одном контейнере .

 .container {
    grid-template-columns: 1fr;
    grid-template-rows: 60px 150px 400px 400px 400px;
    height: 100%;
    max-height: 100%;
    width: 100vw;
    overflow-y: auto;
  }
 

Ожидаемый результат-навигационная панель, прикрепленная к нижней части сайта, и весь контент над ней. Проблема в том, что мне нужно прокрутить вниз, чтобы найти навигационную панель, когда она всегда должна отображаться. Я не могу понять, что не так с этим кодом. Есть идеи?

Кроме того, я знаю, что могу использовать position: fixed , но я бы предпочел этого не делать.