Jquery 100%高度刻度在调整大小后向上滚动

我有一个由三个部分组成的一页网站。每个都有100%的宽度和高度。当我在第一节或最后一节调整窗口大小时，一切都会调整得很好，但是当我在第二节时，它会变得疯狂（不是真的疯狂…调整窗口大小后，第一节也会变短，所以第二节会被拉起，露出第三节的一部分）

问题是，当我位于第二部分并调整窗口大小时，我希望整个部分在窗口内“固定”，所以我不会看到第一部分和第三部分的片段。当我试图描述它时，它变得更加复杂，所以这里有一个简单的提琴：。我说的是B部分（第二部分）的行为。为了证明它有任何意义，我只能补充说，网站上的滚动是关闭的，我只是想让它看起来有点像。。。幻灯片放映？因此，每次调整大小都会在视觉上破坏一切

HTML:

CSS:

#一个{
宽度：100%；
身高：100%；
背景色：红色；
}
#两个{
宽度：100%；
身高：100%；
背景颜色：绿色；
}
#三{
宽度：100%；
身高：100%；
背景颜色：蓝色；
字号：800；
}
a{
颜色：白色；
}

我已经尝试过改变最后一个div大小的hax，但是我根本看不到第三个div。在放弃这个想法后，我还尝试在每个改变高度的调整页面上重新加载整个页面，但效果不太好，因为如果不使用当前位置，我无法重新加载整个页面

谢谢你的帮助

---

E:实际上，我从字面上理解了“固定”的东西，并使用jQuery来防止在某些情况下区域上升或下降。现在就可以了，但如果有人知道我在哪里可以寻求一些提示，使它更加自动化，我将非常感激。

我想在最近参与的一个项目中完成类似的事情。在这个项目中，我们希望屏幕顶部有几个选项卡按钮，单击这些按钮可以切换当前页面主体

您的情况似乎略有不同，但鉴于您正在禁用滚动，并希望当前div占据屏幕的100%宽度和高度，听起来您一次只希望显示1个div，因此我使用的代码应该适合您。我已修改您的代码以显示以下内容：

HTML:

CSS:

div.fill-screen{
宽度：100%；
身高：100%；
显示：无；
}
分区填充屏幕：目标{
显示：块！重要；
}
#一个{
背景色：红色；
}
#两个{
背景颜色：绿色；
}
#三{
背景颜色：蓝色；
字号：800；
}
a{
颜色：白色；
}

JS:

$（窗口）.on（'hashchange'，function（））{
if（document.location.hash==“”| | document.location.hash==“”#”）{
document.location.hash=“#one”；
}
});
$（window.trigger（'hashchange'）；

不幸的是，它确实需要JS，但它非常轻量级，而且肯定比使用jQuery来防止区域上升或下降要好。上面的例子使用jQuery，但是在纯JS中实现它是很简单的——我只是碰巧在项目中使用了jQuery

因此，为了充分解释，这个解决方案在三个div上使用了CSS:target选择器。基本上，这意味着当div是“targeted”时，即URL中的当前哈希引用其id，给定的CSS将添加到该特定div。您的三个div设置为

display:none是不可见的，但当其中任何一个以URL哈希为目标时，显示属性将被覆盖，即
display:block！重要的。这会导致目标div出现并填充页面，但其他两个仍然隐藏，因为它们的CSS不受影响

如果没有给出URL哈希，则JS需要设置URL哈希，例如，当用户第一次导航到您的页面时，并且三个div中没有一个是目标。它绑定到hashchange事件，然后在页面加载时强制触发该事件。这意味着，每当用户导航到没有散列的页面，或者在页面加载后尝试删除散列时，他们都会被定向回默认散列，在本例中为“一”。因此，导航到“/page.html”或“/page.html#”将立即将URL更改为“/page.html#one”，并触发
display:block！重要的id为“1”的div上的规则

如果不希望任何div以页面加载为目标，那么可能不需要JS，或者相反，对于附加的限制，可以通过数组成员身份测试更改if条件以强制哈希为“#1”、“#2”或“#3”。我会让你决定的

如果上面的内容还不完全清楚，那么这里有一个JSFiddle:
看看这个