Создание макета с фиксированным заголовком, фиксированной боковой панелью, секцией фиксированного контента с использованием Angular Материал /Flex -Layout в Angular

Я использую Angular w/Angular Материал и Flex Layout

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

Вот html, который я использую, чтобы дать мне свою основную структуру:

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>
  <md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
  </md-sidenav-container>

Кроме того, я устанавливаю следующие стили:

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
md-sidenav-container, .main-content {
  margin: 0;
  width: 100%;
  height: 100%;
}

Я заметил, что без панели инструментов на странице все работает отлично. Итак, я добавил нижнюю часть: 64px; к классам md-sidenav-container,.main-content. Похоже, он исправил его для контента, но не сиден. Полоса прокрутки sidenav по-прежнему идет ниже окна браузера.

У меня есть flex-layout, установленный в моем приложении Angular, если кто-нибудь может сказать мне, как это сделать с помощью директив flex. В противном случае простой css тоже будет хорошо.

Ответ 1

Вы можете проверить рабочий пример на https://angular-material2-issue-dgcx3j.stackblitz.io/

Он не полностью такой же, как вы запросили (он имеет дополнительную функциональность). Боковая панель фиксируется на больших экранах, аккуратно скрывается на маленьких экранах и показывает кнопку меню на панели инструментов.

Вы можете просмотреть код на https://stackblitz.com/edit/angular-material2-issue-dgcx3j?file=app%2Fapp.component.ts

Также вы можете найти исходный код Angular Site Docs Site (тот, который вы запросили ту же функциональность) в https://github.com/angular/material.angular.io

Ответ 2

Вы можете попробовать этот код

HTML

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav" opened="true">
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
     <div class="my-content">Main content</div>
  </div>

</md-sidenav-container>

CSS

.example-container {
  width: 500px;
  height: 300px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.example-sidenav-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.example-sidenav {
  padding: 20px;
}

.my-content{
  height:1200px;
}

и heres ссылка Plunker: https://plnkr.co/edit/YFGQdVcNnIhMK0GzZ25Z?p=preview

Ответ 3

Это то, что вы ищете

html,
body {
  width: 100%;
  height: 100%;
}

mat-sidenav-container {
  width: 100%;
  height: calc(100% - 64px);
}

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>
<md-sidenav-container>
  <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
  <div class="my-content">
    <router-outlet></router-outlet>
  </div>
</md-sidenav-container>

Ответ 4

С последним Угловым материалом (7.2) он должен работать из коробки.

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>
  <md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
  </md-sidenav-container>