无法一直滚动到 div 的底部

Posted 2023-03-06

【中文标题】无法一直滚动到 div 的底部

【英文标题】：Unable to scroll all the way to bottom of div

【发布时间】：2017-06-07 13:18:00

【问题描述】：

我无法一直向下滚动到我的一个 DIV。仅当我使用笔记本电脑时才会发生这种情况。当我使用更大的屏幕时，一切正常。

我已经读过，将高度设置为 100% 通常有效，但它不适合我。

这是https://postimg.org/image/j6kg868z3/页面截图

为了提供更多上下文，我将此 html 嵌入到共享点页面的正文中（我是共享点品牌）并将 css 链接到我们共享点服务器上保存的资产。

这是css：

@charset "utf-8";
#wrapper 
    position: absolute;
    overflow-y: scroll;
    max-width: 1414px !important;
    min-height: 100%;
    max-height: 100%;

【问题讨论】：

请创建一个最小、完整且可验证的问题示例。 ***.com/help/mcve

您好，抱歉，您是这个意思吗？

您阅读了链接吗？你刚刚给了我们几行 CSS。我们需要对问题进行完整、可验证的复制。

删除“最大高度：100%”

【参考方案1】：

max-height: calc(100vh - 120px) !important;

在你的 .wrapper 类中试试这个，你也可以试试 -100px 或 -80px，看看哪个更适合你，我有同样的问题，只需使用 calc 减小 max-height 的大小效果很好.

我知道你问这个问题已经很久了，但我希望它对其他人有所帮助

【参考方案2】：

您需要改用vh 单位进行height 测量。摆脱min-height 和max-height，只需将height: 100vh; 添加到#wrapper。您还需要确保#wrapper 没有margin 或任何padding。

1vh 等于视口窗口高度的 1%。详细了解 CSS 单元 here。

#wrapper 
  position: absolute;
  overflow-y: scroll;
  max-width: 1414px !important;
  color: white; /* Ignore */
  background: blue; /* Ignore */
  margin: 0;
  padding: 0;
  height: 100vh;

<div id="wrapper">Content</div>

【讨论】：

谢谢。不幸的是，它仍然没有一直向下滚动，实际上它现在向下滚动的次数更少。

@RichHomieNanz 您能否发布指向您网站的链接，或者创建一个 CodePen / JSFiddle 并将其发布在这里？您还可以使用 Stack Overflow 的内置代码编辑器发布一个工作示例。

太奇怪了，我只放了 50vh，现在它可以工作了吗？

@RichHomieNanz 这很奇怪。就像我说的，1vh 等于视口窗口高度的 1%。 100vh 应该是窗口高度的 100%，而 50vh 应该是窗口高度的 50%。您确定您最初输入的是 100vh，而不是 10vh 或 1vh？

好的，现在我看着它，div 仍然更小，当我放 100vh 时，滚动条变得很长，它不会一直向下滚动。

【参考方案3】：

请尝试 (height:10vh) 而不是 (height:100%)。其中 vh 代表视图高度。

【讨论】：

它会向下滚动，但现在它会将 div 切到一个较小的高度，非常薄。

哦！好的，只需添加 z-index:99999 ！important 那么它可能工作正常或分享您的实时输出我会在那里检查

jsfiddle.net/sbmjL2o5/1