Why does this page with 100% height on everything result in a scrollbar?

February 23, 2024

This code, which is simply a nested html, body and canvas tag should be flush on the page with no scrollbars:

<!DOCTYPE html>
<html lang="de" style="width:100%;height:100%;padding:0px;margin:0px;background-color:#0f0">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <script type="text/javascript">
  </script>
</head>

<body style="width:100%;height:100%;padding:0px;margin:0px;background-color:#f00">


  <canvas id="canvas" style="width:100%;height:100%;padding:0px;margin:0;background-color:#00f"></canvas>
</body>

</html>

But instead, it will display a scrollbar with a tiny smidge of green at the bottom (which is the html tag. I have found that this behavior can be fixed by removing the DOCTYPE tag. Why is that?

>Solution :

This is happening because the <canvas> element is treated like an inline element, similar to an <img> tag, since it acts as a graphic element. You simply need to change its display property to block

html,
body,
canvas {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

html {
  background-color: #0f0
}

body {
  background-color: #f00;
}

canvas {
  background-color: #00f;
  display: block;
}

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <script type="text/javascript">
  </script>
</head>

<body>


  <canvas id="canvas"></canvas>
</body>

</html>