Help with positioning elements on page

Question

So, why is this not working? What exactly is wrong? I am trying to have the first and third paragraph be 1/4 of the window height and the second be 1/2 of the height. I thought this is how it is done

Note: I posted this over the weekend but I did not get any reply. I do need the answer and still haven't been able to figure it out. So thanks for helping out.

https://code.sololearn.com/WV7rxOTuUZAb/?ref=app

Answer 1

Try add this to your css file:

.game{
height:100%;
}

Answer 2

Thanks to both of you Niush and Ali! The combination of both your answers gives me exactly what I wanted. You can look at the code again to see the goal I wanted to attain and that you helped me achieve ☺

Answer 3

It is working fine. Isn't it?
The p1 and p3 are indeed 25% and p2 is 50%
Set background color to these item and see. It is fine.

Answer 4

No it's not. Check it out again. Added background colors. Besides, I want them to fill the whole window

Answer 5

p{
margin:0;
}

Completely Unexpected. But, does the job. 👌