管理 angular 组件高度以适应屏幕的最佳方式

Question

我的组件高度有问题...我在一个名为 app-navbar 的组件中有一个 mat-toolbar，而另一个名为 app-sidebar 的组件有一个 mat-nav-list（这是左侧栏菜单）

我有第三个组件将两者结合在一起，但这种情况正在发生：

nav-list 的最后一个项目我希望它位于页面底部，但是给 mat-sidenav-container 组件 100% 的高度，使其成为页面的 "out"，甚至如果页面内容没有滚动。我可以通过将它的高度设置为正确地拥有它： height: calc(100% - 64px) 其中 64px 是 material 工具栏的高度（默认情况下）。我觉得这不是一个正确的解决方案，因为如果 material 决定在某个时候改变高度的大小，我会遇到麻烦。

有没有什么方法可以使用 flex 或类似的东西让它变得更好？

HTML:

<div>
  <app-navbar [mySideBar]="snav" fxFlex></app-navbar>
</div>
  <mat-sidenav-container>
    <mat-sidenav autoFocus="false"
                  #snav mode="side"
                  fixedInViewPort="true"
                  [mode]="side"
                  [opened]="true">
      <app-sidebar [mySideBar]="snav"></app-sidebar>
    </mat-sidenav>
    <mat-sidenav-content fxLayout="column">
      <!-- content -->
    </mat-sidenav-content>
  </mat-sidenav-container>

CSS:

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

或者读取 mat-toolbar 的高度大小而不是对其进行硬编码？

Answer 1

不，我会说 calc 方法是最好的方法。至少，这就是我做同样事情的方式。您可以通过设置工具栏高度来保护自己免受随机 material 设计更改的影响。如果您使用 SASS，您可以将工具栏高度存储在变量中（或地图，每个媒体查询的高度，如果它发生变化），并将它用于工具栏的高度和对于 height: calc(100vh - #{$toolbar-height}).

的计算

编辑：

只是为了好玩，我用 css 网格做了一个快速而肮脏的模型。它工作正常，但我不确定它有多少对你的特定代码是可行的，所以答案仍然存在。只是一个可供考虑的选项：

body { margin: 0; padding: 0; }

.main {
  display: grid;
  grid-template-rows: 64px 1fr;
  grid-template-columns: 300px 1fr;
  height: 100vh;
}

.toolbar {
  background:  grey;
  width:       100%;
  grid-column: span 2;
}

.sidebar {
  background: #BAD;
}

.content {
  padding: 24px;
  overflow: auto;
}

<div class="main">
  <div class="toolbar"></div>
  
  <div class="sidebar"></div>
  
  <div class="content">
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
  </div>
</div>

Answer 2

在尝试使用 fxFlex 一段时间后，我终于可以成功了。

父组件（将两者结合在一起）：

height: 100%
display: flex;

并将两个组件放在 <div fxLayout="column" fxFlex=100%>  </div>

中

对于 <app-navbar> 删除 fxFlex 并提供组件 width: 100%

对于<app-sidebar>这个CSS:

:host {
  overflow: hidden;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  -o-flex: 1;
  flex: 1;
  flex-direction: column;
}

对于<mat-sidenav-container>给出fxFlex="100%"

管理 angular 组件高度以适应屏幕的最佳方式

Best way to manage height of angular components to fit in screen

html

css

angular

flexbox

angular-flex-layout