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

Question

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

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

高度：calc（100％-80px）;

至：

高度：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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Moh*_*man 6

此滚动是因为canvas默认情况下是inline元素。

添加overflow: hidden到body

body {
    overflow: hidden;
}

Run Code Online (Sandbox Code Playgroud)

或者，您可以通过以下两种方式之一来删除画布的多余空白：

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

body {
    overflow: hidden;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，5 月前
查看次数：	1152 次
最近记录：	9 年，5 月前