Question

我正在尝试获取一个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());
    });
});

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

Here is the problem in action

Answer 1

我认为这应该有效吗？它改编自我写的代码，以确保#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());
    }
}

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

1 个答案: