画布尺寸导致出现垂直滚动条答案

【问题标题】：Canvas dimensions cause a vertical scroll bar to appear画布尺寸导致出现垂直滚动条
【发布时间】：2016-06-11 23:21:18
【问题描述】：

在此页面上，它显示一个垂直滚动条。为什么？如果我用 'div' 元素替换 'canvas' 元素，一切正常。要使滚动消失，我可以更改：

高度：计算（100% - 80px）；

到：

高度：计算（100% - 85px）；

但这不对，因为我在页面底部丢失了空间。

    <!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>

【问题讨论】：

标签： html css canvas

【解决方案1】：

这个滚动是因为canvas，因为它默认是inline 元素。

将overflow: hidden 添加到body

body {
    overflow: hidden;
}

或者您可以通过以下两种方式之一删除画布的额外空白：

.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>

【讨论】：

【解决方案2】：

添加这个：

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

因为 canvas 默认是一个内联元素

【讨论】：