容器高度问题 = 100% 不起作用 - Angular/Material

Question

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

Here is a link to my code example

我用谷歌搜索了这个问题，我唯一看到的是设置的解决方案

html, body {
    height: 100%;
}

但是我还没有发现这是一个解决方案。 我在想也许可以使用弹性盒子，但我不熟悉它们的使用方式。

任何帮助将不胜感激。

更新和解决方案 我选择不走 flexbox 路线，因为我想要一些快速的解决方案，而 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 浏览器调试控制台中添加了所有内容，因为我找不到代码使用的实际类，但我相信你可以:)

希望我能帮上忙。