html - 定位滚动div

Question

我又来找你提问了。我有一个由三个元素组成的标志:文本 |标志 |文本。 Logo 部分是静态的。它应该始终水平+垂直居中。我已经完成了这个背景。这两个文本部分需要能够上下滚动，当它离开页面顶部时，一个新版本应该从页面底部出现并停在它再次与 Logo 完全对齐的位置。

我已经在我自己的分辨率为 1920 * 1080 的桌面上完美运行了。但是，我已经完成了这个槽填充和像素。

#logo {
background:none;
padding-top:411px;
}
#logo2 {
background:none;
padding-top:958px;
}
#logo3 {
background:none;
padding-top:962px;
}  

显然这不是正确的方法，因为在任何其他分辨率下对齐都完全关闭。

我创建了一个 JSFiddle:http://jsfiddle.net/thedonny/mzr91b4f/

由于 Fiddle 在较小的屏幕上显示输出，您已经看到了我的问题。我很确定我在这里遗漏了一些东西。有没有人可以指出我如何解决这个问题的正确方向？

亲切的问候， 阿让。

Answer 1

试穿这件尺码:http://jsfiddle.net/mzr91b4f/2/

我将每个 #section 设为视口(viewport)高度的 100%(在设置 html、body 和 之后) .container-fluid 到 100% 高度)。然后，我将每个 #logo 都从顶部偏移了 50%，顶部边距(大约)是图像高度的一半。我对最后一个 #logo 做了一些时髦的调整，让它正好是视口(viewport)的高度，所以滚动条正好停在第三部分窗口的底部。这是 CSS(稍微重组了一下):

html {
    height: 100%;
}
body {
    background: url(http://i.imgur.com/5rFLWpS.png) repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}
.container-fluid {
    height: 100%;
    width: 100%;
}
#sectionone, #sectiontwo, #sectionthree {
    height: 100%;
    width: 100%;
}
#logo {
    background:none;
    position: absolute;
    top: 50%;
    margin-top: -72px;
}
#logo2 {
    background:none;
    position: absolute;
    top: 150%;
    margin-top: -72px;
}
#logo3 {
    background:none;
    position: absolute;
    top: 250%;
    margin-top: -72px;
    bottom: 300%;
    margin-bottom: -72px;
}