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

一页的网站。 顶部带有锚定连杆的收割台 到页面上的不同分区（节）

假设我的屏幕分辨率为1280*800，每个div分区的最大分辨率为800，并且当我的浏览器最大时，每个div分区上的内容都是可见的。我忘了提到滚动被禁用，所以其他div只能通过顶部的锚链接显示（自动滚动）。这就是问题所在，当我调整浏览器的大小时，比如说，我的浏览器只有450px的高度，我只能在屏幕上看到那个数量的内容，并且不能滚动到div的底部，所以它会碰到浏览器的底部

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

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

任何解决方案？

使用媒体查询：

@media screen and (max-height: 450px) {
  body { overflow: auto; } /* Or change the height or whatever */ 
}

---

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

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

工作实例。记住将div的溢出设置为

auto

，这样当屏幕太小时，它们就会显示出来

更新：据我在您的更新中了解，您的需求可以通过简单的CSS得到满足。让

html，body

随意溢出，但将“container”

div

的溢出设置为

hidden

（这样一次只滚动一页），并将其

高度设置为
800px
。当浏览器窗口的大小调整到小于800 px时，主体的滚动条将出现，使您可以上下滚动容器div。容器和内容都将保持相同的大小：800px

html,body {
    overflow: auto;
}

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

工作实例。这就是你需要的吗？如果您确实想将容器div向上推，直到其底部与窗口对齐，请尝试设置
padding top
或
margin top
，而不是
top
（虽然在这种情况下，我不知道滚动将如何工作）。
我认为设置主包装最小高度800px的最佳解决方案，否则，您必须为主要内容添加隐藏溢出。滚动可以通过设置主要内容的顶部位置来触发，但必须是绝对的或类似的。您可以编写一个函数，该函数可以帮助您移动主要内容，改变其顶部位置。
问题在于，正文中的隐藏集溢出为标准集。基本上，我的内容高度从不超过800px，因此我需要启用小于800px的滚动。然后将450px更改为800px或任何您需要的值？您的答案与我的要求一致，基本上如果浏览器高度小于800px，然后滚动时需要移动div的顶部位置，直到div的底部碰到浏览器的底部。有什么线索吗？对不起，我不明白这和我的例子有什么不同。你能解释一下吗？第一个问题：我没有太多编写“纯”JavaScript的经验，我一直使用诸如jQuery之类的web框架（我认为这是可以的，因为你的问题带有标签）。恐怕得由别人来回答。第二个问题：根据您的需要调整选择器<代码>$（“#myelement”）

选择id，

$（“.myclass”）

选择类等等。我不是在说纯javascript，我是在问我应该把它放在哪里，因为它只是上面的

你的代码

还是

这里的某个东西|你的代码|这里的某个东西好吧，这是混淆。在JsFiddle中，溢出仅在屏幕与div重叠时发生，这很好。因为里面的内容是隐藏的。我的问题是我有一个容器（diV），里面有其他diV。容器高度为800px，内容物不超过此值。整个目标是将实际div的顶部位置推到屏幕上方。