jquery - 使页脚小部件重新调整到相同的高度

Question

我正在开发一个 wordpres 网站(有 genesis)。如果站点管理员决定更改其中一个页脚中图像的大小，我需要这样做以便页脚区域自动调整大小。

我有一些 jquery 代码，但它似乎不起作用。

'use strict';
// Get current browser width
var browserWidth = jQuery(window).width();

// Responsive: Get Width
jQuery(window).resize(function() {
    browserWidth = jQuery(this).width();

    // Set size of footer-widgets-*
    selectorSizing( browserWidth );
});

/*
 * Resizes the selector to the designated size
 *
 * @param int    size     Browser Size to do nothing
 * @param string selector Selector, defaults to '#footer-widgets .widget-area'
 */
function selectorSizing( size, selector ) {

    var heights = [];

    // selector as optional argument
    if ( !selector)
        var selector = '.footer-widgets ';

    // size is required
    if ( !size)
        return false;

    // Responsive Code
    // Widgets move to 100% width if width of the browser window is < 300px
    // Done via @media only screen and (max-width: 300px) { } in style.css
    if( 300 < size ) {
        jQuery(selector).each( function( index, value ) {
            heights[index] = jQuery(this).height();
        });

        // Set max height
        var max = Math.max.apply( Math, heights );

        // Assign max height to the footer-widgets
        jQuery(selector).each( function( index, value ) {
            jQuery(this).height(max);
        });
    }
    else {
        // Remove max height to the footer-widgets
        jQuery(selector).each( function( index, value ) {
            jQuery(this).height('auto');
        });
    }
}

selectorSizing( browserWidth );

https://jsfiddle.net/d4q05to6/8/

更新:我想让两个黄色框的高度相同。如果站点用户决定更改图像或更大/更小的图像，则两个黄色框都需要调整，以便它们具有相同的高度。

Answer 1

对于网站的桌面版本，一种选择是使用 CSS 中的显示表格变体使页脚表现为表格。

.footer-widgets{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.footer-widgets .wrap{
    display: table-row;
}
.footer-widgets .wrap .widget-area{
    display: table-cell;
    vertical-align: middle;
}

这是更新的 fiddle同样