定位滚动div

时间:2015-03-16 17:41:32

标签: html css

我再来找你一个问题。我有一个由三个元素组成的徽标:TEXT | 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/

由于小提琴在较小的屏幕中显示输出,您已经看到了我的问题。我很确定我在这里遗漏了一些东西。有没有人可以指出我如何拉动这个?

亲切的问候, 罗。

1 个答案:

答案 0 :(得分:0)

请尝试使用此尺寸:http://jsfiddle.net/mzr91b4f/2/

我将每个#section s视为视口高度的100%(将htmlbody.container-fluid设置为100%高度后。然后,我使每个#logo s偏离顶部50%,边缘顶部(大约)图像高度的一半。我对最后一个#logo进行了一些时髦的调整,使其正好是视口的高度,因此滚动条完全停在第三节窗口的底部。这是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;
}