时间戳

首页 > 解决方案 > Angular（7）材质工具栏+Sidenav；台式机与移动设备的高度差异问题（包括 stackblitz 示例）

css - Angular（7）材质工具栏+Sidenav；台式机与移动设备的高度差异问题（包括 stackblitz 示例）

问题描述

我已经设置了一个页面以在应用程序中使用Angular Material'smat-toolbar和mat-sidenav组件布局Angular 7。在大多数情况下，它工作正常；但是我遇到了这个令人困惑的问题，mat-toolbar因为它在移动视图和桌面视图中的高度不同。

随附的是一个 stackblitz 存储库，它完整地说明了我的问题。

堆栈闪电存储库

问题

工具栏应该64px很高，在桌面上它是；但是在较小的屏幕上它会落到56px我不知道为什么。

桌面

在此处输入图像描述

移动的

在此处输入图像描述

这很重要，因为容器设置的工作方式。整个区域都包裹在这个类中

#content-container {
  position : absolute;
  top      : 64px;
  bottom   : 0;
  left     : 0;
  right    : 0;

  .sidenav {
    &.sitemap {
      background : $pickled-bluewood;
    }


&.usernav {
  background : $ebony;
}



  }
}

我知道我可以通过媒体查询来解决这个问题；只是为较小的视图设置一个断点来调整top，但这对我来说感觉很hacky。我想了解发生了什么，看看是否有我忽略的更自然的解决方法。

我也知道我可以强制工具栏高度，但这最终在一个显示器或另一个显示器上看起来非常尴尬。

如果这真的是唯一优雅的解决方案，我将使用媒体查询，但这只是感觉应该是非常微不足道的事情，而且我没有看到更明显的解决方案让我感到困扰。

标签： cssangularangular-material

解决方案

在主题的预定义 css 中，mat-toolbar-single-row 的高度在不同屏幕高度的媒体查询中定义。

定义最大宽度为 599px 的屏幕

@media (max-width: 599px){
    .mat-toolbar-row, .mat-toolbar-single-row {
        height: 56px;
    }
}

所有大于 599px 的屏幕的定义：

.mat-toolbar-row, .mat-toolbar-single-row {
    height: 64px;
}

使用#content-container 的绝对位置，它被迫<body>在浏览器顶部或顶部下方64px。在这种情况下，最好使用默认位置：静态

具有位置的元素：静态；没有以任何特殊方式定位；总是按照页面的正常流程定位

最简单的解决方案是删除位置并将#content-container的顶部元素设置为0：

#content-container {
    top: 0;
    bottom : 0;
    left : 0;
    right : 0;

    ...
}

推荐阅读