一页网站,带有一系列面板,每个面板都是视口的大小

tho*_*m_p 4 jquery jquery-plugins viewport responsive-design

我一直在寻找一种方法来实现这一目标,但似乎无法找到答案.我想创建一个单页网站,将被由一系列面板,视窗的各个尺寸(无论是在高度和宽度),并用不同的背景颜色的.

因此,当我进入页面时,我的视口充满了面板1,然后我可以向下滚动到面板2,它也将完全填充视口.

这是一个快速测试页面来说明我的意思:http://dev.manifold.ws/test/ 但是,显然,我想要的是每个面板的高度为视口的100%(不是固定高度).

这是一个更成功的网站:http://www.deuxhuithuit.com

我觉得必须有一个相当简单的方法来实现这一点,但我似乎无法找到它.

任何帮助将不胜感激.我需要一些jQuery吗?我应该依赖插件吗?或者有没有办法用CSS做到这一点?

谢谢,

-Thom

tho*_*m_p 6

好的,所以看起来我终究解决了.最后它真的很简单.不需要jQuery或插件.我用一个工作示例更新了我的测试页面:http://dev.manifold.ws/test/

这是HTML:

<body>

  <section id="red">
  </section>

  <section id="blue">
  </section>

  <section id="green">
  </section>

</body>
Run Code Online (Sandbox Code Playgroud)

而CSS:

html,body {
height:100%;
margin:0;
padding:0;
}

#red {
min-height:100%;
position:relative;
background:#F00;
}

#blue {
min-height:100%;
position:relative;
background:#00F
}

#green {
min-height:100%;
position:relative;
background:#0F0;
}
Run Code Online (Sandbox Code Playgroud)

非常直截了当.