Question

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

在这种情况下，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>

Answer 1

绝对位置的默认设置是将左侧和顶部设置为0，在另一个下方设置一个div，您需要将其中一个设置为100%，因为它们不在文档流程，或使用位置相对（这将导致其他问题与空元素，身体没有位置等）：

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

FIDDLE

Answer 2

将margin-top: 75%;添加到#second div。

因为position:absolute;会使其位置为0, 0，所以您需要在上面留出一些空间来降低它。

Demo.

Answer 3

不确定为什么需要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;
}

2 div旁边和100％

3 个答案:

CSS