CODEWITHSUNDEEP
htmlcsscanvas
danilo_lr
danilo_lr

Reputation: 77

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>

Upvotes: 4

Views: 2174

Answers (2)

Mohammad Usman
Mohammad Usman

Reputation: 39322

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>

Upvotes: 11

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Add this:

   .cv {
      display: block;    /* ADD ME!!!! */

because canvas is by default an inline element

Upvotes: 1

Related Questions