Макет Angular Flex Всегда показывает полосу прокрутки

Я новичок в угловой и гибкой компоновке. Моя страница довольно проста. Заголовок с боковой панелью навигации и выходом для маршрутизатора.

Я столкнулся с проблемой, что на моей странице всегда отображается полоса прокрутки.

Если я удалю fxFlexFill, полоса прокрутки не будет отображаться. Как я могу это исправить?

Вот демонстрация stackblitz Stackblitz

Вот мой шаблон:

.fill-space {
  flex: 1 1 auto;
}

.content {
  flex: 1 1 auto;
  padding: 15px;
  position: relative;
  overflow-y: auto;
}

.footer {
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
}
<div style="height: 100vh;">
  <mat-toolbar color="primary" class="fixed-header">
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <mat-icon>menu</mat-icon>
      </button>
      <span><button mat-button routerLink="/home"><h3>HOSPITALITY</h3></button></span>
      <span class="fill-space"></span>
      <div fxShow="true" fxHide.lt-md="true">
        <button mat-button routerLink="/home">HOME</button>
        <button mat-button routerLink="/account">MY ACCOUNT</button>
        <button mat-button routerLink="/login">LOGOUT</button>

        <a href="#" routerLink="/cart" mat-button>
          <mat-icon>shopping_cart</mat-icon>
          0
        </a>
      </div>
    </mat-toolbar-row>
  </mat-toolbar>

  <mat-sidenav-container fxFlexFill>
    <mat-sidenav #sidenav fxLayout="column" mode="over"  opened="false" fxHide.gt-sm="true">
      
      <div fxLayout="column">
        <button mat-button routerLink="/home">HOME</button>
        <button mat-button routerLink="/account">MY ACCOUNT</button>
        <button mat-button routerLink="/login">LOGOUT</button>

        <a href="#" routerLink="/cart" mat-button>
          <mat-icon>shopping_cart</mat-icon>
          0
        </a>
      <a (click)="sidenav.toggle()" mat-list-item>
        <mat-icon>close</mat-icon> Close
      </a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content >
      <div class="content">
        <router-outlet></router-outlet>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>

</div>


angular css flexbox angular-flex-layout
person Chatra    schedule 09.03.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Основная проблема заключается в том, что боковая навигационная панель получает высоту 100vh с помощью директивы fxFlexFill.

Нужно учитывать высоту mat-toolbar-row, например, по CSS calc (есть и другие способы добиться его эффекта, зависит от того, как вы структурируете макет страницы)

Кроме того, у тела есть поле 8 пикселей из стиля браузера по умолчанию.

Вот форк Stackblitz

person Guy Yogev    schedule 09.03.2019
comment
маржа: 0 не помогло. Нужно ли мне npm установить normalize.css и как это может помочь решить мою проблему. - person Chatra; 10.03.2019
comment
каждый браузер имеет свой собственный базовый стиль. margin: 0 решает проблему во фрагменте кода вопроса, удаляя поле по умолчанию в 8 пикселей. возможно, в вашем проекте действуют другие глобальные стили. - person Guy Yogev; 10.03.2019
comment
Единственные другие стили, которые я использую, - это предварительно созданные темы из материала angular. Других стилей нет. - person Chatra; 10.03.2019
comment
Можете ли вы создать демонстрацию со всеми стилями? - person Guy Yogev; 10.03.2019
comment
Вот пример stackblitz stackblitz.com/edit/angular-mbp7rq - person Chatra; 10.03.2019
comment
как получить эти 64 пикселя. потому что на мобильном устройстве отображается полоса прокрутки. можем ли мы рассчитать это, используя высоту верхнего и нижнего колонтитула? - person Chatra; 10.03.2019
comment
взгляните на код панели инструментов и при необходимости используйте медиа-запросы. - person Guy Yogev; 10.03.2019