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

Question

我试图让一个画布元素占据整个文档高度和窗口宽度，以便当我调整窗口大小时，画布元素与它一起展开，实际上，给我一个全屏的画布。但实际上发生的事情是，无论窗口的大小如何调整，文档高度（以及画布高度）都会增加。

我使用这个代码：

$(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()); 
    } 
}