動態設置畫布尺寸時文檔高度增加調整大小

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