角度材料：滚动条位置错误

Question

在我基于angular+material的项目中，我只是成功地将垂直滚动条定位在工具栏下方（在sidenav的帮助下）。

但它并不适用于所有情况。 见https://stackblitz.com/edit/angular-ivy-pst9kr

• 主页：没有滚动条：很好
• page2 : 文字很长，右边有一个滚动条：很好
• page1：带有奇怪滚动条的居中图像：糟糕！

Page1 有一个带有 firefox 的水平滚动条！？！ 我希望右边有一个垂直滚动条，没有水平滚动条。 我需要将图像、表格和文本居中。

我尝试使用水平滚动条的“宽度”，但没有成功。

编辑： 对 ！在我的项目中它没有按预期工作，所以我很困惑，直到我重写并做了一些清理。

1. 我用 2 个 div 包围了每一页：

<div class="page-container">
<div class="page-content">
...
</div></div>

1. 我将“stdpage”替换为：

.page-container {
  position: fixed;
  top: 64px;
  overflow: auto;
  height: calc(100vh - 64px);
  width: 100%;
}

.page-content {
  padding-right:  3rem;
  padding-left:   3rem;
  padding-bottom: 1rem;
}

Answer 1

通过在 stdpage 类中提供 width: 100% 就可以了。 Page 1 添加宽度后会正确获得垂直滚动条。

.stdpage {
  position: fixed;
  top: 64px;
  width: 100%;
  overflow: auto;
  height: calc(100vh - 64px);
}