1

我想以垂直的方式一个接一个地拥有不同的div。我的意思是用户必须使用滚动从一个到另一个。但是即使用户更改窗口的大小，所有这些 div 都是 100% 的宽度和高度。我在一些网站上看到过，但我不知道该怎么做。

我在这里简化了这个：http: //jsfiddle.net/bgWzb/

在这种情况下，div 是 100%，但在另一个之下，我尝试先放置 #first 然后放置 #second。用户应该滚动查看#second。我怎样才能做到这一点？如有必要，我可以使用 jQuery。

body{ margin:0; padding:0; }

#first{
    position:absolute;
    width:100%; height:100%;
    background:blue;
}

#second{
    position:absolute;
    width:100%; height:100%;
    background:yellow;
}

HTML：

<div id="first"></div>
<div id="second"></div>
4

3 回答 3

4

position absolute 的默认设置是将 left 和 top 设置为0，要让一个 div 在另一个下，您需要将 top 设置为100%其中一个，因为它们不在文档流中，或者使用 position relative （这会导致其他问题有空元素，身体没有位置等）：

#second{
    position:absolute;
    top: 100%;
    width:100%; 
    height:100%;
    background:yellow;
}

小提琴

于 2013-07-27T13:58:42.653 回答
1

添加margin-top: 75%;到#seconddiv。

因为position:absolute;会使它的位置0, 0，所以你需要在上面留出一些空间来把它放下。

演示。

于 2013-07-27T14:09:42.647 回答
1

不知道你为什么需要position: absolute. 只记得给html和body一个width和height财产。

http://jsfiddle.net/bgWzb/4/

CSS

html,
body,
#first,
#second{
    margin:0;
    padding:0; 
    height: 100%;
    width: 100%; }

#first{
    background:blue;
}

#second{
    background:yellow;
}
于 2013-07-27T14:26:15.257 回答