Высота документа увеличивается при изменении размера при динамической настройке размеров холста

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 с точно таким же результатом.Это причуды изменения размеров элементов холста, или я что-то упустил?

Вот проблема в действии

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