Javascript 页脚为'的运行时错误；s使用jQuery调整大小

我目前正在使用PHP，这个页脚是每个页面的组件之一。首先，我知道这种大小的页脚在发布之前需要缩小；在我创建下拉菜单（或者在本例中是弹出菜单）之前，它当前的格式是这样的

我目前将jQuery设置为在窗口调整大小时自动调整页脚高度（使用去盎司），因为内部元素以网格模式移动。然而，我遇到了几个问题：

在第一次页面加载时，在调整任何大小之前，它没有将页脚延伸足够远，因此所有内部元素都位于相同的彩色背景上。我知道我可以只添加一个常量，但我希望它与最终用户的默认文本大小成比例

多次调整大小后，页脚的总高度比预期的高出几倍

我看不出错误；我做错了什么？我已经将相关代码粘贴到JSFIDLE中，因为它相当长

编辑：问题2已修复。默认行为现在是问题1

编辑2：这里有一个预览。不过，你还是应该检查小提琴

var maxWidth, maxHeight, numBoxes;

function arrangeFooter() {
    // Get the width of the footer to determine # of rows
    var footerWidth = $("#footer").width();

    // Get list of .box divs' widths and lengths
    var widths = $(".box").map(function() {
        return $(this).innerWidth();
    }).get();

    var heights = $(".box").map(function() {
        return $(this).height();
    }).get();

    numBoxes = widths.length;

    // Find maxWidth, maxHeight of .box divs
    // From these, finds # of cols that can fit with the maxWidth,
    // and number of rows
    maxWidth = Math.max.apply(Math, widths);
    maxHeight = Math.max.apply(Math, heights);
    var cols = Math.floor(footerWidth / maxWidth);
    var rows = Math.ceil(numBoxes / cols);

    // Calculates footer's new height, defined as 
    // maxHeight * num rows + height of .firstrow div
    var newHeight = maxHeight * rows + parseFloat($(".firstrow").css("font-size"));

    // Prints out resulting CSS rules directly to page
    var styling = "\n  .box {\n    height: " + maxHeight + "px;\n    width: " + 
                    maxWidth + "px;\n  }\n"
    styling += "\n  #footer {\n    height:" + newHeight + "px;\n  }\n";
    $("#style").text(styling);
}

function resizeFooter() {
    var footerWidth = $("#footer").width();

    var cols = Math.floor(footerWidth / maxWidth);
    var rows = Math.ceil(numBoxes / cols);

    // Calculates footer's new height, defined as 
    // maxHeight * num rows + height of .firstrow div
    var newHeight = maxHeight * rows + parseFloat($(".firstrow").css("font-size"));

    // Prints out resulting CSS rules directly to page
    $('#footer').css('height',newHeight);
}

// Debounce method; used to ensure that only one event is fired
// after ms if multiple identical events are triggered
var delay = (function() {
    var timers = {};
    return function(callback, ms, uniqueId) {
        if (!uniqueId) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
            clearTimeout(timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
    };
})();

function init() {
    // calls arrangeFooter after 200ms to ensure page loads first
    setTimeout(arrangeFooter, 200);
    // Problem? Executes 500ms after window resize is "complete"
    $(window).on("resize", function() {
        delay(function() {
            resizeFooter();
        }, 500, "resize");
    });
}

window.onload = init();​

---

在稍微弄乱了代码之后，我认为问题与将第一行的字体大小添加到box div中的内容大小有关

这将增加大约16个像素的高度，但不会增加边距（10个像素）、填充（另外10个像素）或边框（1个像素）。此外，如果屏幕很薄，由于某种原因，行延伸到两行，那么它只会添加一次字体大小，而不会添加两次

因此，我建议另一种选择：

var newHeight = maxHeight * rows + $(".firstrow").outerHeight(true);

---

.outerHeight（true）将为您提供元素的高度，包括边距。

表面上看，我觉得代码很好。也许别的地方有虫子？您是否尝试过在每个循环中将newHeight、maxHeight和rows转储到控制台？@blueberryfields是的，我尝试过。

maxHeight

和

rows

仅定义一次（当页面最初加载时）；只有

newHeight

在每次调整大小时都会更改。这没有意义。如果newHeight计算中的所有元素保持不变，newHeight也应该保持不变。@blueberryfields D'oh！这是问题的一部分，但现在它默认为问题#1。我是否缺少那里的部分代码？我看不到采用新高度值并生成页脚高度的部分。我把$（'footer'）.css（'height'，newHeight）放进去；在arrangeFooter（）的末尾，它适用于我。我知道我可以用.height（）来做，只是出于某种原因没有-\u-抱歉花了这么长时间，但是

.outerHeight（true）

只是放大了错误。我使用的是

边框框

属性，因此

.height（）

和

.width（）

都会在计算中返回填充。也许我应该把.firstrow的

页边距底部

移动到.box的

页边距顶部

？我会查出来的。当当，对不起，我没能帮上忙：/出于好奇，你在用什么浏览器/操作系统？Mac OS X+Chrome。我偶尔也用Safari和FF做测试。我真傻。刚刚意识到我使用了

.outerWidth（true）

而不是

.outerHeight（true）

。谢谢没问题：）谢谢你证实了这一点，我以为我疯了>_