Question

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

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

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

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

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

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

我用 2 个 div 包围了每个页面：

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

我将“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

通过在 width: 100% 类中提供 stdpage 工作得很好。添加宽度后，第1页将正确获取垂直滚动条。

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

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

1 个答案: