如何在不创建滚动条的情况下获得视口的高度和宽度？答案

【问题标题】：How to get height and width of viewport without creating scrollbars?如何在不创建滚动条的情况下获得视口的高度和宽度？
【发布时间】：2018-01-15 06:36:37
【问题描述】：

试图将 HTML canvas 扩展到整个页面，但 jQuery width() 和 height() 函数正在创建垂直和水平滚动条。

HTML

<body>
    <canvas id="bg_canvas" width="" height=""></canvas>
</body>

jQuery

// Expand canvas to full viewport size
    var vp_width = window.clientWidth;
    var vp_height = window.clientHeight;

    $("#bg_canvas").css({
        "width" : vp_width,
        "height" : vp_height
    });

// Canvas Drawing
    var canvas = document.getElementById("bg_canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle="#cbf7ed";
    ctx.fillRect(100,100,vp_width,100);

还尝试了 Javascript window.innerheight 和 window.innerWidth，但这也会创建滚动条。

【问题讨论】：

vp_width 返回的 (/a) 值是否正确？您也可以尝试使用 CSS：#bg_canvas{width:100vw;height:100vh;}.

标签： jquery height width scrollbars

【解决方案1】：

默认浏览器样式表可能会给<body> 元素留出边距。因为画布在主体内，这会使画布大于其父级，从而创建一个可滚动的视图。

如果您希望画布跨越窗口的宽度，请通过 CSS 从 body 元素中删除边距和内边距。您可以使用内联样式验证这一点：<body style="margin:0 padding:0">（尽管将样式放置在离散文件或至少在 html 标头中通常是最佳做法）。

或者，如果您希望画布跨越身体，请使用以下内容：

var vp_width = $('body').innerWidth;
var vp_height = $('body').innerHeight;

【讨论】：

谢谢！似乎就是这样。我现在添加了一个位置：absolute 在画布上，绕过身体。再次感谢！