CODEWITHSUNDEEP
htmlcss
user8739422
user8739422

Reputation:

Stop page from scrolling down in HTML/CSS

So I am currently creating a video game using HTML, CSS, and JavaScript. I am working on the design of the page, and I am having a problem. My page has a lot of empty space under it, and creates a huge unused portion of the page that you scroll down to. Is there anyway to stop it from scrolling down?

Here is my code:

* {
overflow: hidden;
}




body {
background-color: antiquewhite;
}





#fullcanvas {
border: 6px double black;

}

#title {
position: relative;
color: darkgreen;
font-family: sans-serif;
font-size: 30px;
border: 0px solid black;
border-width: 0px;
bottom: 667px;
left: 20px;
}

#game_rules_canvas {
position: relative;
border: 10px solid black;
border-width: 8px;
bottom: 678px;
left: 20px;
border-right-style: dashed;
border-left-style: dashed;
height: 400px;
width: 300px;



}

Upvotes: 1

Views: 1054

Answers (1)

Aquious
Aquious

Reputation: 64

Using your css and recreating the elements referenced as div's doesn't seem to replicate your issue. See here: jsfiddle

The following rule should be stopping all scrolling:

* {
overflow: hidden;
}

Sounds like you've either got other code being used or javascript causing an issue. Things I would do to try and diagnose:

  1. Add overflow: hidden!important; to see if that overrides the problem
  2. Right click and inspect the empty space to see it's styles and what element it's referencing. (<html>, <body>, <other>, etc).
  3. Remove the javascript to see how the page renders.

If you can provide more of your code, or even screenshots, it would help.

Upvotes: 1

Related Questions