Question

我目前正在使用PHP，这个页脚是每个页面的组件之一。首先，我知道这个尺寸的页脚需要在我发布之前变小;在我创建下拉菜单（或者在这种情况下，弹出菜单）菜单之前，它目前的格式是这样的。

我目前有jQuery设置为在窗口调整大小（带去抖动）时自动调整页脚高度，因为内部元素以网格模式移动。但是，我遇到了几个问题：

在第一页加载时，在调整任何大小之前，它不会足够远地扩展页脚，因此所有内部元素都在相同的彩色背景上。我知道我可以添加一个常量，但我希望它能够根据最终用户的默认文本大小进行扩展。
~~多次调整大小后，页脚的总高度是预期的几倍。~~

我无法发现错误;我究竟做错了什么？我已将相关代码粘贴到jsFiddle中，因为它相当长。

编辑：问题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();

Answer 1

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

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

因此，我建议替代方案：

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

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

使用jQuery调整页脚大小的运行时错误

1 个答案: