Javascript 动态设置画布尺寸时，文档高度随调整大小而增加

我试图让canvas元素占据整个文档高度和窗口宽度，这样当我调整窗口大小时，canvas元素就会随之拉伸，实际上，这给了我一个全屏的canvas。然而，实际发生的是，无论窗口大小如何，文档高度（以及画布高度）都会增加

我正在使用以下代码：

$(document).ready(function () {
    $("#wrapper").before("<div id='background'><canvas id='depth' width='"+$(window).width()+"'height='"+$(document).height()+"'></canvas></div>");
    $(window).resize(function() {
        $("#depth").attr("width",$(window).width());
        $("#depth").attr("height",$(document).height());
    });
});

$（文档）.ready（函数（）{
$（“#包装”）。在（“”）之前；
$（窗口）。调整大小（函数（）{
$（“#深度”）.attr（“宽度”，$（窗口）.width（））；
$（“#depth”）.attr（“height”，$（document.height（））；
});
});

我也尝试过使用DOM脚本，结果完全相同。这是调整画布元素大小的一个怪癖，还是我遗漏了什么

---

我想这应该行吗？它是根据我编写的代码改编的，以确保

#wrapper

始终伸展到屏幕底部，如果内容还没有到达底部（但我删除了最小高度限制）。我相信你也可以根据你对宽度的需求来调整

错误的地方总结在数学中，用于计算窗口负向调整时的高度

我还留下了一些额外的信息，您可以看到这些信息在计算窗口高度时处理了一些浏览器不一致的问题；解决了我发现的几个错误

$(document).ready(function() {resize()});
$(window).resize(function() {resize()});

// Calculate Required Wrapper Height
function resize() {
    // I think this is for Opera's benefit?
    var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();

    // IE7
    if (jQuery.browser.msie) {
        if(parseInt(jQuery.browser.version) == 7) {
            viewportHeight -= 3;
        }
    }

    if($('#wrapper').height() > viewportHeight) {
        $('.content').height($('#wrapper').height() - viewportHeight);
    }

    if($('#wrapper').height() < viewportHeight) {
        $('.content').height(viewportHeight - $('#wrapper').height());
    }
}

$（document）.ready（函数（）{resize（）}）；
$（窗口）.resize（函数（）{resize（）}）；
//计算所需的包装高度
函数resize（）{
//我想这是为了歌剧院的利益？
var viewportHeight=window.innerHeight？window.innerHeight:$（window.height（）；
//IE7
if（jQuery.browser.msie）{
if（parseInt（jQuery.browser.version）==7）{
视口高度-=3；
}
}
if（$（“#包装器”）.height（）>viewportHeight）{
$（'.content'）.height（$（'#wrapper'）.height（）-viewportHeight）；
}
if（$（'#包装器'）.height（）

经过一些修改，效果非常好。谢谢你的帮助！