角柔性布局挑战

Question

我有一个使用angular flex和Angular flex-layout的angular app（v6.1）。我正在使用angular 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 with result

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>