当我提到宽度为 window.innerwidth 和高度为 window.innerheight 时，为啥我会溢出
Posted
技术标签:
【中文标题】当我提到宽度为 window.innerwidth 和高度为 window.innerheight 时，为啥我会溢出【英文标题】：Why am I getting overflow when i mentioned width to be window.innerwidth and height to be window.innerheight当我提到宽度为 window.innerwidth 和高度为 window.innerheight 时，为什么我会溢出 【发布时间】：2021-10-14 05:15:40 【问题描述】：screenshot for reference
所以我一直想知道，当我提到高度和宽度分别为 window.innerheight 和 window.innerwidth 时，是什么导致了溢出。
这是一个sn-p：
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;*
box-sizing: border-box;
html,
body
margin: 0;
padding: 0;
canvas
border: 1px solid;
<body>
<canvas id="canvas" ></canvas>
<script src="./canvas.js"></script>
</body>【问题讨论】：
【参考方案1】：在css中设置宽度和高度：
canvas
width: 100%;
height: 100%;
【讨论】：
【参考方案2】：简短的回答似乎是宽度和高度是 HTML 属性 - 与 CSS 无关 - 而 box-sizing 与 CSS 有关。即 box-sizing 不会影响宽度/高度 + 边框设置，因此您会溢出。
对于更长的答案，我试图了解我的 Windows10 系统（Edge/Chrome）在通过 CSS 设置画布尺寸时发生了什么，而属性保持不变。我只是部分理解，x 方向似乎很好，边框在那里，但右侧的垂直边框被隐藏了一个垂直滚动条 - 似乎计算是一个像素，直到我全屏显示没有滚动。
希望其他人可以更深入地解释这里发生了什么，因为画布上的 box-sizing 似乎有效，但没有完全发挥作用。
为了安全起见，这个 sn-p 将所有内容设置为具有边距和填充 0。
canvas = document.querySelector('canvas');
function resize()
//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
window.onresize = resize;
resize();*
box-sizing: border-box;
*
margin: 0;
padding: 0;
canvas
border: 10px solid;
<canvas id="canvas" width=""></canvas>【讨论】：
以上是关于当我提到宽度为 window.innerwidth 和高度为 window.innerheight 时，为啥我会溢出的主要内容，如果未能解决你的问题，请参考以下文章