javascript - 如何仅在窗口大小调整较小时启用滚动条？

Question

一页网站。 标题位于顶部，带有 anchor 链接 到页面上的不同 div(部分)。

假设我的屏幕分辨率为 1280*800，每个 div 部分最大为 800，并且当我的浏览器尺寸最大时，每个 div 部分上的内容都是可见的。我忘记提及滚动被禁用，因此其他 div 只能使用顶部的 anchor 链接可见(自动滚动)。所以问题就在这里，当我调整浏览器的大小时，比如说我的浏览器上只有 450px 的高度，我只能在屏幕上看到那么多内容，并且无法滚动到 div 的底部，因此它会到达底部我的浏览器。

另一点需要理解的是，div 本身的所有元素都不会溢出 div 的高度，因此简单的溢出不起作用，因为问题与浏览器高度的大小有关。

本质上，当浏览器窗口小于 800px 时，div 就会在底部被浏览器缩小的量所覆盖。我希望整个 div (不是其中的内容)尽可能向上推(顶部位置)，以便 div 的底部(即第 800 个像素)接触浏览器的底部。

有什么解决办法吗？

Answer 1

您可以监听窗口大小的变化并根据它调整 div 的大小。这样，div 将始终具有窗口的大小，因此如果它太小，则会显示溢出。

$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
    $("div").css("height", $(window).height());
});​​​​

工作示例位于jsFiddle 。请记住将 div 的溢出设置为 auto，这样当屏幕太小时它们就会显示。

更新:根据我在您的更新中了解到的情况，您的要求可以通过简单的 CSS 来满足。让html,body随意溢出，但是将“容器”div的溢出设置为hidden(这样就只会滚动一页一次)并将其高度设置为800px。当浏览器窗口大小调整到小于 800 像素时，主体的滚动条将出现，让您上下滚动容器 div。容器和内容都将保持相同的大小:800px。

html,body {
    overflow: auto;
}

.container, .contents {
    height: 800px;
    overflow: hidden;
}

工作示例位于jsFiddle 。这是你需要的吗？如果您确实想将容器 div 向上推直到其底部与窗口对齐，请尝试设置 padding-top 或 margin-top 而不是 top code> (尽管在这种情况下我不知道滚动将如何工作)。