Question

我的应用程序中有一个设计问题，正文在我的导航和命令行中滚动，我不知道如何解决。我不是要在正文文本在下面流动的地方寻找z-index修复程序，我想将lorem ipsum填充文本的上滚动限制在命令栏的正下方。正文很大，需要滚动。当前看起来像这样：

导航栏CSS：

position: fixed;
width: 100%;
top: 0;

命令行：

margin-bottom: 60px;

正文：

position: relative;
min-height: 1px;
padding-left: 8px;
padding-right: 8px;
box-sizing: border-box;
float: left;

我正在使用Microsoft的ui-fabric网格系统，并可以在必要时发布更多代码。但是我希望有一个简单的“为此div从顶部x像素处设置垂直滚动断点”-或类似的东西。但是我似乎什么也找不到。

我想我对此不太了解，因此，如果有人可以解释如何解决此滚动问题的全局，那将会很有帮助。

Answer 1

您可以将文本所在的容器的高度限制为特定的高度，然后将y轴上的溢出设置为滚动，这将导致您想要的行为，因为滚动仅限于容器div，因此，文字不会在导航栏中滚动。

请记住要从顶部开始调整边距，以便它在导航和命令栏下开始。

示例（假设您的导航栏为10vh）：

#text-container {
  height: 90vh;
  margin-top: 10vh;
  overflow-y: scroll;
}

例如，您的导航栏为100px，您可以这样做：

height: calc(100vh-100px);
margin-top: 100px;

这将校正高度，以便始终覆盖整个屏幕。

如果出现水平滚动条，则可以根据您想要的行为用overflow-x: visible;或overflow-x: hidden;隐藏它

Answer 2

要以正文文本的偏移量开头，只需在其顶部留出与导航栏相同高度的边距，即

margin-top: 50px;

这将为您的身体在用户开始滚动之前提供一个初始间距

Answer 3

.full_width {
    position: relative !important;
    z-index: 5000;
}