Menu
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>
382
asked Sep 12 '25 20:09
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:
.cv {display: block;}.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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
