Question

单页网站。顶部的标题有锚链接到页面上的不同div（部分）。

假设我的屏幕分辨率为1280 * 800，每个div部分最大为800，当浏览器的最大尺寸时，每个div部分的内容都可见。我忘了提到滚动被禁用，所以其他div只能使用顶部的锚链接可见（自动滚动）。接下来是问题所在，当我调整浏览器大小时，例如我的浏览器上只有450px的高度，我只能看到屏幕上的内容量并且无法滚动直到div的底部，所以它会触及底部我的浏览器。

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

实质上，当浏览器窗口小于800px时，底部会被浏览器减少的数量覆盖。我希望将整个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（因此它一次只能滚动一页）及其height到800px。当浏览器窗口的大小调整为小于800像素时，将显示正文的滚动条，让您上下滚动容器div。容器和容器都将保持相同的大小：800px。

html,body {
    overflow: auto;
}

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

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

Answer 2

使用媒体查询：

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

Answer 3

我认为设置主要包装800px的最小高度的最佳解决方案，否则你必须为主要内容添加隐藏的溢出。可以通过设置主要内容顶部位置来触发滚动，但它必须是绝对的或类似的。你写了一个函数女巫帮助你移动主要内容改变它的顶部位置。

仅当窗口调整为较小时，如何启用滚动条？

3 个答案: