如何定位左侧导航图标

Question

无论用户监视器屏幕的大小如何，我都试图将我的帮助图标始终放在屏幕底部，但我正在努力使其正常工作，所以如果我能得到任何建议或帮助。

现在我已经尝试使用 margin 和 margin-top 但当我更改为不同的显示器尺寸时它不起作用。

<mat-sidenav-container style="height: 100%;">
  <mat-sidenav-content>
    <div class="left-nav">
      <a class="nav-logo" routerLink="/"></a>
      <span [style.marginTop.px]="8">{{title}}</span>

      <a class="left-nav-link" *ngFor="let nav of navList" [routerLink]="nav.path" routerLinkActive="active-nav-link">
        <div class="icon-wrap icons">
          <img matTooltip = {{nav.name}} matTooltipPosition="right" matTooltipClass="tooltip" class = "nav-icons" src = {{nav.icon}}>
          <img matTooltip = {{nav.name}} matTooltipPosition="right" matTooltipClass="tooltip" class = "nav-icons-hover" src = {{nav.iconHover}}>
          <img matTooltip = {{nav.name}} matTooltipPosition="right" matTooltipClass="tooltip" class = "nav-icons-select" src = {{nav.iconSelect}}>
        </div>
        <div class="active-bar">
          <div class="active-bar-fill"></div>
        </div>
      </a>

      <a class="help-nav-link" *ngFor="let nav of navHelp" [routerLink]="nav.path" routerLinkActive="active-nav-link">
        <div class="icon-wrap icons">
          <img matTooltip = {{nav.name}} matTooltipPosition="right" matTooltipClass="tooltip" class = "nav-icons" src = {{nav.icon}}>
          <img matTooltip = {{nav.name}} matTooltipPosition="right" matTooltipClass="tooltip" class = "nav-icons-hover" src = {{nav.iconHover}}>
          <img matTooltip = {{nav.name}} matTooltipPosition="right" matTooltipClass="tooltip" class = "nav-icons-select" src = {{nav.iconSelect}}>
        </div>
        <div class="active-bar">
          <div class="active-bar-fill"></div>
        </div>
      </a>

    </div>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

mat-sidenav-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

// This is for the top three icon

.left-nav-link {
    display: flex;
    justify-content: center;
    align-self: stretch;
    text-decoration: none;
    margin: 8px 0;
    min-height: 56px;
}

// This is for Help Icon
.help-nav-link {
    display: flex;
    justify-content: center;
    align-self: stretch;
    text-decoration: none;
    margin: 808px 0;
    min-height: 56px;
}

不同的屏幕尺寸

Answer 1

你为什么不试试 angular material grid-lis？

https://material.angular.io/components/grid-list/examples

• 这将帮助您在各种屏幕尺寸中制作帮助图标！

你也可以把它分成行和列

https://www.w3schools.com/howto/howto_js_list_grid_view.asp

• 以及像这样对您的代码使用。它会解决你的问题

   position: relative;
   left:0 // change you own
   top:0// change you own
  

Answer 2

绝对定位和相对单位，如vh 应该会有所帮助。

此 html 代码示例与您在问题中的 Angular 代码很接近（我已删除无用的细节）

<div style="height: 100vh;">
  <main>
    <div class="left-nav">

      <a class="left-nav-link">
        <div class="icon-wrap icons">
          <div class="icon"></div>    
        </div>
      </a>

      <a class="help-nav-link">
        <div class="icon-wrap icons">
          <div class="icon"></div>
        </div>
        <div class="active-bar">
          <div class="active-bar-fill"></div>
        </div>
      </a>
    </div>
  </main>
</div>

main {
    height: 100vh;
}
.left-nav {
  height: 100%;
  position: relative;
  max-width:3rem;
}
a.help-nav-link > div.icon-wrap {
  display: block;
  position: absolute;
  bottom: 0;
}
div.icon {
  background-color: green;
  width: 2rem;
  height: 2rem;
}

Answer 3

提供position 而不是margin

.left-nav{
  position:relative;
}
.help-nav-link {
 position: absolute;
 bottom: 0; /*can be changed as per your needs*/
 right: 0; /*can be changed as per your needs*/
}

另外，阅读 CSS Positions here

Answer 4

如果你浮动不工作，那么你可以在你的样式文件中尝试这个。

         .left-nav{
position:relative;

}

.nav-logo{
position:absolute;
left:30%;
bottom:0%

}