如何使每个部分的高度相同？

Question

我想知道如何制作每个被调用的部分#app,section2以及section3与我网站的#app部分中展示的完整网页相同的高度100%.例如,我不希望在我到达时看到文本"PART 3" #section2我希望每个部分的高度等同于单个页面.

这是我想要实现的一个例子.

为了使它们具有相同的高度,我使用了下面的CSS,但是我显然错过了一些因为它不起作用的东西.

body,
html {
    width: 100%;
    height: 100%;
}

#app
#section2,
#section3,{
  height: 100vh;
  width: 100%;
}

这是使用jsfiddle链接到我的站点代码

Answer 1

#app,
#section2,
#section3 {
  height: 100vh;
  width: 100%;
}

您的初始CSS编写不正确,因此上述代码(已更正)从未正确应用.解决这个问题,您就可以很好地实现预期的结果了.