为什么出现垂直滚动条时html5画布不是全屏答案

【问题标题】：why html5 canvas is not full screen when vertical scrollbar appears为什么出现垂直滚动条时html5画布不是全屏
【发布时间】：2021-04-11 10:08:08
【问题描述】：

我使用全屏画布作为页面第一部分的背景。但是当我添加第二部分并出现垂直滚动条时，画布的高度会降低一点并且出现间隙。这是我的代码：
P.S：对不起，我的代码包含错误，我已修复它们。现在您可以看到红色间隙了。

var canvas = document.getElementById('canvas')
var c = canvas.getContext('2d')

scaleCanvas()
window.addEventListener("resize", scaleCanvas)

function scaleCanvas() {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    c.fillStyle = 'black'
    c.fillRect(0, 0, canvas.width, canvas.height)
}

* {
    box-sizing: border-box;
    max-width: 100%;
}

body {
    margin: 0;
    padding: 0;
}

#first-section {
    position: relative;
    min-height: 100vh;
    background-color: red; /* to see the gap */
}

#content {
    position: relative;
    z-index: 2;
}

#second-section {
    min-height: 100vh;
    background-color: blue;
}

#canvas {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

<div id="first-section">
    <canvas id="canvas"></canvas>
    <div id="content">content</div>
</div>
<div id="second-section"></div>

【问题讨论】：

你能再添加一些代码吗？，这里我看不到你指定的问题
哪个浏览器？在 Firefox 中，我同时获得了垂直和水平滚动条，但只有在较大的视图尺寸下。
你的代码对吗？我在 CSS 中看到 id="first-section" 但只有 .first-section 。如果您可以制作一个显示问题的有效 sn-p 会很好。
@AHaworth 你是对的，我很抱歉这个错误。我修好了。

标签： javascript html css html5-canvas

【解决方案1】：

假设您的意思是全屏，而不是整页。两者有很大不同。

如果您指的是整页，那么Screen API 的链接也会为您提供有关获取页面大小的详细信息。

大小全屏画布。

问题是您的内容超出了页面宽度和高度（innerWidth、innerHeight）

id 为first-section、content 和second-section 的元素必须在显示区域内，否则会出现滚动条。滚动条将更改 innerWidth、innerHeight 值减去滚动条宽度或高度，具体取决于哪个可见。

为了防止滚动条，最好的选择是将所有内容保留在 innerWidth 和 innerHeight 中

带有滚动条的全屏显示。

如果您想要滚动条并且您正在使用全屏，您可以使用Screen API 来获取显示的width 和height（以像素为单位）。您可以设置画布大小以匹配屏幕，而滚动条不会影响其大小。

注意请阅读提供的指向Screen 的链接，因为定义屏幕的内容可能与预期不同。 EG 不止一台显示器，或设备方向会影响您使用 API 的方式。

基本示例

因此，在全屏模式下，您可以设置画布大小并忽略滚动条

function sizeFullScreenCanvas() {
  canvas.width = screen.width;
  canvas.height= screen.height;
}

【讨论】：