Body is too high

Question

In two of my HTML codes you can scroll down even though there are no elements down there. The body seems to get "higher" the wider it is. This problem only occurs on my smartphone.
https://code.sololearn.com/Wz1o64t7s7eg/?ref=app
https://code.sololearn.com/W23V9RtXT4zC/?ref=app

Answer 1

If you need it to work on smartphone screens, consider using relative sizes

For making the body screensize:

body {
width: 100vw;
height: 100vh;
position: fixed;
}

Answer 2

How much do you want to scroll? Or do you want to scroll only along the width in general?

Answer 3

I think it's a positioning issue that is related to trying to style with css and the element directly. Or with positioning and transform.

I haven't found the issue yet.

Answer 4

Lisa If I do it like that, you can't scroll at all anymore.

Answer 5

Lisa Horizontally I want to scroll so far that you can see everything in both codes (this works already). In "Ball throw simulation" I don't want to scroll vertically and in the other code I want to scroll at least so far down that you can read everything.