proper css to ensure that the body element fills the entire screen

Question

I have a problem with my body element. It seems that it is filling 100% percent of the screen. However, if you drag the browser small and then scroll down - the body doesn\'t

Answer 1

height: 100%; is the height of the window your site is displayed in not the height of the website, which causes the background getting purple when srolling down.

Just add this:

html { background: green; }

And remove the

body { background: green; }

to get the background to always be green. (JSFiddle)