how can i change the whole page background color without knowing its size?

Question

I've wrote a program that changes the page background on every click or key down.

question 1 - I have to give the body - height and width. it won't work without that. it is as if the body has no height at all. is there a way to get something like body=window?

question 2 - how can i get the actual window/screen size via javascript?

<style>
  body {
     background-color: yellow;
     height: 800px;
     width: 1400px;
        }
</style>

<body onclick="myFunction()" onkeydown="myFunction()">

script
    var news=0; // to check if new page load -> to go to full screen

    function myFunction() {   
       // GO TO FULL SCREEN ON PAGE LOAD (OR REFRESH)
       if (news==0) {
          var elem = document.documentElement;
          if (elem.requestFullscreen) {
             elem.requestFullscreen();
          } else if (elem.msRequestFullscreen) {
             elem.msRequestFullscreen();
          } else if (elem.mozRequestFullScreen) {
             elem.mozRequestFullScreen();
          } else if (elem.webkitRequestFullscreen) {
             elem.webkitRequestFullscreen();
          }
          news = 1; 
       }

       // give the body a new random color
       var letters = '0123456789ABCDEF';
       var color = '#';
       for (var i = 0; i < 6; i++ ) {
          color += letters[Math.floor(Math.random() * 16)];
       }
       document.body.style.backgroundColor = color;

    }
 </script>
</body>

`` needs to have content before it has height. It's kind of like filling a balloon with air. The more air, the larger the balloon. — hungerstar, Mar 07 '17 at 22:02
@user3586104 please accept the answer that helped you! You get SO rep for doing so ;) — jdmdevdotnet, Mar 07 '17 at 22:19

score 1 · Accepted Answer · edited May 23 '17 at 12:17

1

You can give your body 100% height, which will make it take up all of the space available. Generally you must give some fixed height to the parent element so that you can use percentages, but the html element is an exception so you can do the following:

html, body {
    height: 100%;
}

As for getting the dimensions, there are many different methods which give different measures depending on what you are looking for. In this case I imagine the most relevant is window.innerHeight

edited May 23 '17 at 12:17

Community

1
1

answered Mar 07 '17 at 21:47

Pabs123

3,275
11
28

Yes and no on the fixed height. Something has to be defined on a parent for percentages to work. If the parent is a relative unit like `rem` percentages still work. `html` inherits from the window. – hungerstar Mar 07 '17 at 22:05
1

I guess the term I was looking for was "defined height" on the parent more than fixed – Pabs123 Mar 07 '17 at 22:06
ty. almost... i get a vertical scroll bar – stam golesh Mar 07 '17 at 22:07
1

@user3586104 that's because you did not remove the margin that your browser adds to `` by default, use `body { margin: 0; }`. – hungerstar Mar 07 '17 at 22:12

score 0 · Answer 2 · answered Mar 07 '17 at 21:49

html, body {
    height: 100%;
}

That would give your body a full height of 100% of what's available.

You can then simply change the background color via:

document.body.style.backgroundColor = color and you don't need to know the height or set it. (It's already set).

score 0 · Answer 3 · answered Mar 07 '17 at 21:55

0

This can be fixed with CSS.

 body {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    box-sizing:border-box;
    background: yellow;
    overflow:auto;
 }

Now, body tag will take full width and height of the screen.

answered Mar 07 '17 at 21:55

ajai Jothi

2,131
1
6
15

how can i change the whole page background color without knowing its size?

3 Answers3