滚动条无法完全拉到页面底部

Question

我有一个小问题。我有一个主要的div，它的类名为scroll。我还有几个其他的输入参数，从用户那里获取输入。这些输入参数垂直地填满了整个页面。

现在我使用Chrome最小化按钮将屏幕最小化（即恢复下按钮）。页面会缩小，并出现滚动条，因为它设置为overflow:scroll。

现在的问题是它无法滚动到页面的末尾。假设有20个输入参数，当我最小化时，我只能滚动到第18个输入参数。滚动条不会超过18，而且会隐藏最后2个，所以查看者无法看到。

<div class="scroll">
</div>
<!-- Added this extra div below and now able to scroll the last 2 parameters as well -->
<div style="height:50px;">
</div>

.scroll {
height:100%;
overflow:scroll; 
}

有人能告诉我我做错了什么吗？

- Patrick

---

它是隐藏在系统任务栏后面还是在另一个显示器上？ - user5952891

我不确定你的意思。当我按住鼠标并拖动页面底部以最大化窗口时，我可以看到最后2个参数。 - Patrick

Answer 1

可能的原因：

• 使用position: absolute;时，出现类似于margin-top: 100px或top: 100px与height: 100%相结合的垂直偏移。在这种情况下，请更改为height: calc(100% - 100px);。

• 使用padding-top或padding-bottom同样会出现此问题。解决方法： box-sizing: border-box;

但是没有代码，所有这些只是猜测...

- Johannes

---

根据@Johannes的建议，设置高度对我很有效。高度：calc（100％-100px）; - Noah Huntington

Answer 2

不确定可能的原因是什么，但在常规div下面添加一个额外的div解决了问题。现在我可以查看上面div中的所有项目。请参见问题本身以获取答案。 如果有人想要这样的解决方法，这可能会有所帮助。

- Patrick

---

我也遇到了同样的情况。 - Pratik Singhal

真的是一个hack，但它也解决了我的问题。谢谢！ - the_flucs

Answer 3

用 min-height 替换 height 应该可以解决这个问题。

修改为：

修改如下：

.scroll {
    height:100%;
    overflow:scroll; 
}

转化为：

.scroll {
    min-height:100%;
    overflow:scroll; 
}

- AndrewL64

---

尝试过了，但是不起作用。然而，如果我设置高度为300px或800px，则可以看到滚动条。可能出了什么问题？ - Patrick

如果是这种情况，尝试添加min-height为800px和height为100%，看看是否可以解决问题。 - AndrewL64

我在下面添加了一个额外的div，并给它设置了高度。现在滚动可以到达上面div中的最后一个参数。请查看我问题中编辑过的代码。你能告诉我现在可能出现什么问题吗？感谢所有的建议。 - Patrick

Answer 4

.scroll{
height: calc(100vh - 100%);
overflow-y: scroll;
}

- karthickkannan

Answer 5

如果以上解决方案对您无效，您可以向滚动条添加负边距。这只是一个权宜之计而不是真正的解决方案，但对我来说已经足够了。

.scroll::-webkit-scrollbar-track{
        margin-top: -10px;
        margin-bottom: -10px;
}

- Dani_lotup

Answer 6

遇到了同样的问题。通过将overflow:hidden应用于直接父容器来解决它。

假设您在容器内有一个要应用滚动条的部分。首先确保包含该部分的容器被赋予了overflow:hidden，然后继续将overflow:scroll应用于子部分。

对我有用。

愉快的编码 :)

- Phillip Musiime

Answer 7

我遇到了完全相同的问题，并通过在布局页面中删除"main"部分来解决了它。

一开始：

        <div class="container">
            <main role="main" class="pb-3 d-flex flex-nowrap" st>
                @RenderBody()
                <partial name="_Notification" />
            </main>

        </div>

修改后，问题得到解决：

        <div class="container">
                @RenderBody()
                <partial name="_Notification" />
        </div>

我已经检查了CSS文件（例如bootstrap）中主类的大小限制，但没有发现任何问题...

我猜这可能是HTML 5的问题。但这只是一个猜测。

如果有人能找到问题的根源，我会非常感兴趣；-）

最好的问候 马库斯

- Marcus

Answer 8

希望它能解决问题

.scroll{margin-bottom : 50px;}

- Pradeep Phulse

Answer 9

对于带有滚动条的 div，padding-bottom 是你的好朋友。

.scroll {
  height:100%;
  overflow:scroll; 
  padding-bottom: 5rem;
}

- Muhammad Ishtiaq Hussain

Answer 10

我曾经遇到过类似的问题，我的bootstrap元素(table-responsive)使用vh作为高度单位。当我将vh单位替换为px时，问题得到了解决。

.element{
height:700px;
overflow:auto;
}

- Abhishek