调整大小后 100% 高度 div 向上滚动

Question

我有一个由三个部分组成的单页网站。它们每个都有 100% 的宽度和高度。当我在第一节或最后一节调整窗口大小时，一切都调整得很好，但是当我在第二节时，它变得疯狂（不是真的疯狂......调整窗口大小后，第一节也变短了，所以第二部分被拖上来，显示第三部分的一部分）。

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

HTML：

<div id="one"><a href="#two">A</a></div>
<div id="two"><a href="#three">B</a></div>
<div id="three"><a href="#one">C</a></div>

CSS：

#one {
    width:100%;
    height:100%;
    background-color:red;
}
#two {
    width:100%;
    height:100%;
    background-color:green;
}
#three {
    width:100%;
    height:100%;
    background-color:blue;
    font-weight:800;
}
a {
    color:white;
}

我已经尝试过更改最后一个 div 大小的方法，但是我根本看不到第三个 div。放弃这个想法后，我还尝试在每次调整高度时重新加载整个页面，但效果不佳，因为不使用当前位置就无法实现整个页面的重新加载。

感谢您的帮助。

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

Answer 1

我想在我最近参与的一个项目中完成类似的事情。在项目的例子中，我们希望在屏幕顶部有几个选项卡按钮，点击时会切换当前页面正文。

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

HTML：

<div class="fill-screen" id="one"><a href="#two">A</a></div>
<div class="fill-screen" id="two"><a href="#three">B</a></div>
<div class="fill-screen" id="three"><a href="#one">C</a></div>

CSS：

div.fill-screen {
    width: 100%;
    height: 100%;
    display: none;
}

div.fill-screen:target {
    display: block !important;
}

#one {
    background-color: red;
}

#two {
    background-color: green;
}

#three {
    background-color: blue;
    font-weight: 800;    
}

a {
    color: white; 
}

JS：

$(window).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 被“定位”时，即 URL 中的当前哈希引用它的 id，给定的 CSS 将被添加到该特定 div。默认情况下，您的三个 div 设置为 display: none;，因此是不可见的，但是当它们中的任何一个在 URL 哈希中定位时，显示属性将被覆盖，即 display: block !important;。这会导致目标 div 出现并填充页面，但其他两个保持隐藏，因为它们的 CSS 不受影响。

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

如果您不希望在页面加载时定位任何 div，则可能不需要 JS，或者相反，对于其他限制，您可以更改 if 条件以强制哈希为“#one” , "#two" 或 "#three" 与数组成员测试。我会留给你的。

如果以上内容不完全清楚，这里有一个 JSFiddle：http://jsfiddle.net/Tedworthy/M33Ct/