Jquery 带有一系列面板的一页网站，每个面板的大小与视口的大小相同_Jquery_Jquery Plugins_Responsive Design_Viewport

Jquery 带有一系列面板的一页网站，每个面板的大小与视口的大小相同

jquery jquery-plugins responsive-design

Jquery 带有一系列面板的一页网站，每个面板的大小与视口的大小相同,jquery,jquery-plugins,responsive-design,viewport,Jquery,Jquery Plugins,Responsive Design,Viewport,我一直在寻找实现这一目标的方法，但似乎找不到答案。我想创建一个单页网站，它将由一系列面板组成，每个面板的大小（高度和宽度）与视口的大小相同，并且具有不同的背景颜色因此，当我进入页面时，我的视口被面板1填充，然后我可以向下滚动到面板2，面板2也将完全填充视口这里有一个快速测试页面来说明我的意思：但是，很明显，我希望每个面板的高度都是视口的100%（不是固定高度）下面是一个更复杂的网站，它成功地做到了这一点：我觉得必须有一个相当简单的方法来实现这一点，但我似乎找不到它任何帮助都将不胜感

我一直在寻找实现这一目标的方法，但似乎找不到答案。我想创建一个单页网站，它将由一系列面板组成，每个面板的大小（高度和宽度）与视口的大小相同，并且具有不同的背景颜色

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

这里有一个快速测试页面来说明我的意思：但是，很明显，我希望每个面板的高度都是视口的100%（不是固定高度）

下面是一个更复杂的网站，它成功地做到了这一点：

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

任何帮助都将不胜感激。我需要一些jQuery吗？我应该依赖插件吗？或者有没有一种方法可以用CSS实现这一点

谢谢

-TOM

听起来你在寻找一页Nav jQuery插件：

下面是一个演示：

就在今天早上，我在一个StackOverflow问题上看到了这一点：

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

好的，看来我终于找到了答案。最后，这真的很简单。不需要jQuery或插件。我用一个工作示例更新了我的测试页面：

以下是HTML：

<body>

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

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

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

</body>

非常直截了当。

嗨，这是一个不错的插件，但这不是我想要的。我的主要问题是设置div的高度，使其100%位于视口中，这意味着窗口中页面的可视部分为100%。您对每个部分使用“位置：相对”有什么原因吗？我试着不用它，但它似乎工作得很好，只是想知道。。。

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