调整大小后，高度div会向上滚动100％

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大小来进行hax，但是后来我根本看不到第三个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不受影响。

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

事实证明，如果您不希望在页面加载时定位任何div，则不需要JS；或者相反，对于其他限制，您可以更改if条件以强制哈希为“ #one”，“＃两个”或“ #three”进行数组成员资格测试。 我留给你。

如果以上内容不清楚，请使用JSFiddle： http : //jsfiddle.net/Tedworthy/M33Ct/