2

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

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

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

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

有什么解决办法吗？

4

3 回答 3

2

您可以收听窗口大小的变化并调整 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 px 时，会出现 body 的滚动条，让您上下滚动容器 div。容器和内容都将保持相同的大小：800px。

html,body {
    overflow: auto;
}

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

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

于 2012-10-24T23:06:51.013 回答
0

使用媒体查询：

@media screen and (max-height: 450px) {
  body { overflow: auto; } /* Or change the height or whatever */ 
}
于 2012-10-24T22:59:19.860 回答
0

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

于 2012-10-24T23:07:55.953 回答