角度（7）材质工具栏+ Sidenav；遇到台式机与移动设备之间的高度差异带来的麻烦（包括stackblitz示例）

时间：2019-01-10 08:15:10

标签： css angular angular-material

我已经设置了一个页面，以在Angular Material应用程序中使用mat-toolbar的{​​{1}}和mat-sidenav组件布局。在大多数情况下，它运行良好。但是我在Angular 7高度上遇到了一个令人困惑的问题，在移动视图和桌面视图中，高度是不同的。

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

STACKBLITZ REPOSITORY

问题

该工具栏应该高mat-toolbar，而在桌面上是；但是在较小的屏幕上，它落在64px上，我不知道为什么。

DESKTOP

enter image description here

移动

enter image description here

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

56px

我知道我可以通过媒体查询解决此问题；只是为较小的视图设置一个断点来调整#content-container { position : absolute; top : 64px; bottom : 0; left : 0; right : 0; .sidenav { &.sitemap { background : $pickled-bluewood; } 

&.usernav {
  background : $ebony;
}
} } ，但这对我来说太难了。我想了解正在发生的事情，看看是否有更自然的解决方案可以忽略。

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

如果这确实是唯一的优雅解决方案，我将使用媒体查询，但这感觉应该是非常琐碎的事情，让我感到困扰的是我没有找到更明显的解决方案。

1 个答案:

答案 0 :(得分：1)

在主题的预定义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;

    ...
}
相关问题
最新问题