logo标签列表

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

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

height: calc(100% - 80px);

到：

height: calc(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>
2个回答
11
这个滚动条是因为canvas默认是一个inline元素。将overflow: hidden添加到body。
body {
    overflow: hidden;
}

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

  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>

1

Add this:

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

因为Canvas默认是内联元素。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接