代码之家 › 专栏 › 技术社区 › ssdimmanuel

角度柔性布局挑战

angular-flex-layout angular-material angular css html

ssdimmanuel · 技术社区 · 7 年前

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>

2 回复 | 直到 7 年前

Benjamin Kindle 7 年前

可以你需要做一些事情来让这一切顺利进行。

首先,你需要确保你的身体有100%的高度。否则,每当一个元素被赋予100%的高度时,它就不知道“100%是什么”,只会按照自己的意愿增长。

height: 100%; overflow: auto . 这表示“元素填充其父元素,如果内容变得更大,则使内容可滚动”。具体来说,将这些样式添加到两个内部列中。

stackblitz with result

agam 7 年前

做你需要的事情最好的方法之一就是就像

<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>

推荐文章

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

Bitan Basak · 使垫子自动完成功能类似于Bootstrap选择

1 年前