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％宽度＆amp;屏幕的高度，听起来你只想一次显示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属性将被覆盖，即display: block !important;。这会导致目标div出现并填充页面，但其他两个仍保持隐藏，因为它们的CSS不受影响。

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

如果您不希望在页面加载时使用任何div，或者相反地为了额外的限制，您可以更改if条件以强制哈希是“#one”，那么可能会发现您不需要JS。，“#two”或“#three”，带有数组成员资格测试。我会留给你的。

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

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

1 个答案: