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

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/

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

Answer 1

对于网站的桌面版，一种选择是使用 CSS.

中的显示 table 变体使您的页脚表现为 table

.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

Answer 2

试试这个 - 它应该是响应式的。您可以调整媒体查询断点以匹配您的模板。

在这里，如果您想要流畅的页脚，您需要删除小部件区域的固定 width 并使用基于百分比的宽度。同时相应地调整父元素和子元素。

请参阅 demo - 尝试调整 window

的大小

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

Making footer widgets re-size to the same height

css

jquery

footer