管理 angular 组件高度以适应屏幕的最佳方式
Best way to manage height of angular components to fit in screen
我的组件高度有问题...我在一个名为 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
的高度大小而不是对其进行硬编码?
不,我会说 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>
在尝试使用 fxFlex 一段时间后,我终于可以成功了。
父组件(将两者结合在一起):
height: 100%
display: flex;
并将两个组件放在 <div fxLayout="column" fxFlex=100%> <!--components--> </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%"
我的组件高度有问题...我在一个名为 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
的高度大小而不是对其进行硬编码?
不,我会说 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>
在尝试使用 fxFlex 一段时间后,我终于可以成功了。
父组件(将两者结合在一起):
height: 100%
display: flex;
并将两个组件放在 <div fxLayout="column" fxFlex=100%> <!--components--> </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%"