4

我一直在寻找一种方法来实现这一点，但似乎无法找到答案。我想创建一个单页网站，该网站由一系列面板组成，每个面板的大小（高度和宽度）和不同的背景颜色。

所以，当我进入页面时，我的视口充满了面板 1，然后我可以向下滚动到面板 2，这也将完全填满视口。

这是一个快速测试页面来说明我的意思：http ://dev.manifold.ws/test/ 但是，很明显，我想要的是每个面板的高度是视口的 100%（不是固定高度）。

这是一个更复杂的网站，它成功地做到了：http: //www.deuxhuithuit.com

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

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

谢谢，

-汤姆

4

2 回答 2

6

好吧，看来我终于想通了。最后真的很简单。不需要 jQuery 或插件。我用一个工作示例更新了我的测试页面：http: //dev.manifold.ws/test/

这是HTML：

<body>

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

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

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

</body>

和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;
}

很直接。

于 2012-08-14T21:30:24.663 回答
0

听起来您正在使用 One Page Nav jQuery 插件：

http://trevordavis.net/blog/jquery-one-page-navigation-plugin/

这是一个演示： http ://trevordavis.net/play/jquery-one-page-nav/

我今天早上在 StackOverflow 问题上看到了这一点：http: //www.visualwayofthinking.com/en/

单击顶部的选项卡以查看动画。

于 2012-08-14T17:08:42.020 回答