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

Question

I was wondering how I can make each section which is called #app , section2 and section3 the same height which is the full web page 100% like demonstrated in the #app section of my site. For example, I don't want to see the text "PART 3" when I'm at #section2 I want the height to of each section to be the equivalent of a single page.

Here is an example of what I'm trying to achieve.

In order to make them all the same height I used the following CSS however, I'm obviously missing something as it's not working.

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

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

Here is a link to my site code using jsfiddle

Answer 1

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

Your initial CSS is improperly written so that the above code (corrected) is never properly applied. Fix that and you're well on your way to achieving your desired results.