容器高度问题= 100％无效 - 角度/材质

Question

我正在使用Angular和Material设计元素为新UI创建一个模型，但是我在尝试获取工具栏下方的区域以占据页面的剩余垂直高度时遇到了麻烦。

Here is a link to my code example

我已经用Google搜索了问题，我唯一看到的就是设置

的解决方案

html, body {
    height: 100%;
}

但是我没有发现这是一个解决方案。 我在考虑使用弹性盒，但我不熟悉它们的使用方式。

任何帮助都将不胜感激。

UPDATES＆amp;解 我选择不去灵活盒路线，因为我想要一些快速的解决方案，而flexbox可以成为我未来更多的东西。

在决定我想要一个静态导航栏（第一次编码时没有出现）时，我开始使用CSS计算来利用height: 100vh并减去由此引起的悬垂。

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

然而，我发现，当缩小窗口的大小时，材质元素的响应特性意味着工具栏的高度会有所降低。这导致页面内容下方出现空白条，因为在这种情况下减去的数量需要更少。

对此的修复是为触发收缩的特定页面宽度添加@media更改。然后我最终离​​开了以下内容：

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

@media (max-width: 600px) {
    mat-sidenav-container {
        height: calc(100vh - 56px)
    }
}

这可能不是问题的最佳解决方案，但到目前为止，我发现这是一个有效的解决方案。

Answer 1

好的，这就是你给我的代码对我有用的东西：

我将style="height:100%"添加到以下类中：

html，blitz-app，次要div和mat-sidebar-container

已修改：已将html代码的样式更改为：height:calc(100% - 64px); 原因：64px是工具栏的高度

我在Chrome浏览器调试控制台中添加了所有内容，因为我无法找到代码正在使用的实际类，但我相信你可以：）

希望我能提供帮助。

Answer 2

尝试使用其他＆＃39;指标＆＃39;像px或vh。

html, body {
    height: 100vh;
}