Setting element height to clientHeight cause page scroll

Question

I have this piece of code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>      
        window.addEventListener('load', () => {
            document.getElementById("c").width = document.documentElement.clientWidth;
            document.getElementById("c").height = document.documentElement.clientHeight;
        })
    </script>
  </head>
  <body style="margin: 0;">
    <canvas id="c" style="background-color: red;"></canvas>
  </body>
</html>

Why it generates canvas bigger than browser viewport, and makes scrollbar? And beside that it makes some white space below canvas. Why and how to solve it? Thanks!

Scott Marcus · Accepted Answer · 2020-11-02 20:42:04Z

3

By default canvas display are set to display: inline;
You just have to set your canvas display to display: block;

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>      
        window.addEventListener('load', () => {
            document.getElementById("c").width = document.documentElement.clientWidth;
            document.getElementById("c").height = document.documentElement.clientHeight;
        })
    </script>
  </head>
  <body style="margin: 0;">
    <canvas id="c" style="background-color: red; display: block;"></canvas>
  </body>
</html>

edited Nov 2, 2020 at 20:42

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

answered Nov 2, 2020 at 20:41

Arky

1214 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting element height to clientHeight cause page scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related