Угловая гибкая компоновка

Question

У меня есть угловое приложение (v6.1), которое использует Angle Flex и Angular Flex-layout. Я использую Angle v6.1, чтобы использовать функцию прокрутки фрагмента. Моя страница имеет панель инструментов, боковую навигацию со ссылками на фрагменты внутри страницы и центральное содержание (см. Рисунок ниже). Мое требование состоит в том, чтобы панель инструментов и левая навигация были исправлены, в то время как только центральное содержимое должно прокручиваться. Ниже приводится мой app.component.html. с помощью этого html прокручивается вся страница, а не только содержимое центра. Как мне добиться желаемого поведения?

app.component.html

<div  fxLayout="column">
  <div fxFlex="20%" fxFlexFill style="background-color: rgb(48, 138, 133); ">
      <mat-toolbar color="primary">
        <mat-toolbar-row fxLayoutGap="10px">
          <a type="button" href="#one">Menu item #1</a>
          <a type="button" href="#two">Menu item #2</a>
        </mat-toolbar-row>
      </mat-toolbar>
  </div>
  <div fxFlex="80%">
    <div fxLayout="row" style="background-color: cadetblue">
      <div fxFlex="20%" fxLayout="column" style="background-color: chocolate">
        <a mat-button routerLink="./" routerLinkActive="active" fragment="one">Nav Link #1</a>
        <a mat-button routerLink="./" routerLinkActive="active" fragment="two">Nav Link #2</a>
        <a mat-button routerLink="./" routerLinkActive="active" fragment="three">Nav Link #3</a>
        <a mat-button routerLink="./" routerLinkActive="active" fragment="four">Nav Link #4</a>
        <a mat-button routerLink="./" routerLinkActive="active" fragment="five">Nav Link #5</a>
      </div>
      <div fxLayout="column" fxLayoutGap="100px" fxFlex="100%"
        style="background-color: chartreuse;">
        <p id="one">para 1</p>
        <p id="two">para 2</p>
        <p id="three">para 3</p>
        <p id="four">para 4</p>
        <p id="five">para 5</p>
        <p id="six">para 6</p>
        <p id="seven">para 7</p>
        <p id="eight">para content 8</p>
      </div>
    </div>
  </div>
</div>

Answer 1

Хорошо. Есть несколько вещей, которые вам нужно сделать, чтобы сделать эту работу.

Во-первых, вам нужно убедиться, что ваше тело имеет высоту 100%. В противном случае, когда элементу присваивается высота 100%, он не будет знать «100% чего» и будет просто расти так, как ему хочется.

Следующее, что вам нужно, это добавить этот стиль в нескольких местах: height: 100%; overflow: auto. Это говорит о том, что «элемент заполняет его родительский элемент, и, если содержимое увеличивается, делайте его прокручиваемым». В частности, добавьте эти стили к двум внутренним столбцам.

stackblitz с результатом

Answer 2

Один из лучших способов сделать то, что вам нужно, это Создавая sidenav и панель инструментов как отдельный компонент и отображая дочерние компоненты в теле (зеленая область) Так же, как

<header role="mast-head">
   <div class="container-fluid">
      //Your header will come here 
   </div>
</header>
<div class="side bar">
   <ul>
      <li routerLinkActive="active" [routerLink]="['/homepage/h']"><a href="javascript:"><img src="" alt="" />Dashboard</a></li>
      <li routerLinkActive="active" [routerLink]="['/homepage/dst']"><a href="javascript:"><img src="" alt="" />A</a></li>
      <li routerLinkActive="active" [routerLink]="['/homepage/j']"><a href="javascript:"><img src="" alt="" />B </a></li>
   </ul>
</div>
<div class="body">
   <router-outlet >     
   </router-outlet>
</div>