danilo_lr danilo_lr - 5 months ago 9
CSS Question

Canvas dimensions cause a vertical scroll bar to appear

On this page it shows a vertical scroll bar. Why ? If I replace the 'canvas' element with a 'div' element all works fine.
To make the scroll go away I can change the :

height: calc(100% - 80px);

to :

height: calc(100% - 85px);

But this is not right because I loss space on the bottom of the page.

<!DOCTYPE html>
<html lang="en-us">

<head>
<style>
html {
padding: 0px;
border: 0px;
margin: 0px;
height: 100%;
width: 100%;
}

body {
padding: 0px;
border: 0px;
margin: 0px;
height: 100%;
width: 100%;
background: #00FFFF;
}

.top {
padding: 0px;
border: 0px;
margin: 0px;
background-color: #FF0000;
width: 100%;
height: 80px;
}

.cv {
padding: 0px;
border: 0px;
margin: 0px;
background-color: #00FF00;
width: 100%;
height: calc(100% - 80px);
border-image-width: 0px;
}
</style>

</head>

<body>

<div class="top">
</div>

<canvas class="cv">
</canvas>

</body>

</html>

Answer

This scroll is because of canvas as it is by default an inline element.

Add overflow: hidden to body

body {
    overflow: hidden;
}

OR you can remove extra white space of canvas by one of two ways:

  1. .cv {display: block;}
  2. .cv {vertical-align: top;}

html {
  padding: 0px;
  border: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
}

body {
  padding: 0px;
  border: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
  background: #00FFFF;
}

.top {
  padding: 0px;
  border: 0px;
  margin: 0px;
  background-color: #FF0000;
  width: 100%;
  height: 80px;
}

.cv {
  padding: 0px;
  border: 0px;
  margin: 0px;
  background-color: #00FF00;
  width: 100%;
  height: calc(100% - 80px);
  border-image-width: 0px;
  display: block;
}
<div class="top">
</div>

<canvas class="cv">
</canvas>