Question

在此页面上显示垂直滚动条。为什么？如果我更换＆＃39;画布＆＃39;元素与＆＃39; div＆＃39;元素一切正常。为了使滚动消失，我可以改变：

身高：计算（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>

Answer 1

此滚动归因于canvas，因为它默认为inline元素。

将overflow: hidden添加到body

body {
    overflow: hidden;
}

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

添加：

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

因为canvas默认是内联元素

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

2 个答案: