我在这个页面上发现另一个问题,即两个元素具有相同的高度,即使其中一个元素没有足够的元素覆盖整个区域。它工作得很好,但达到最大宽度600px后,我想禁用此代码,如回到高度:auto;我试图解决这个问题,但没有任何结果。有什么建议吗?这是实际的javascript代码。
HTML
<div id="section3a" data-same-height="blocks-resize">
</div>
<div id="section3b" data-same-height="blocks-resize">
</div>
JAVASCRIPT
$(document).ready(function() {
var equalize = function () {
var disableOnMaxWidth = 0; // 767 for bootstrap
var grouped = {};
var elements = $('*[data-same-height]');
elements.each(function () {
var el = $(this);
var id = el.attr('data-same-height');
if (!grouped[id]) {
grouped[id] = [];
}
grouped[id].push(el);
});
$.each(grouped, function (key) {
var elements = $('*[data-same-height="' + key + '"]');
elements.css('height', '');
var winWidth = $(window).width();
if (winWidth <= disableOnMaxWidth) {
return;
}
var maxHeight = 0;
elements.each(function () {
var eleq = $(this);
maxHeight = Math.max(eleq.height(), maxHeight);
});
elements.css('height', maxHeight + "px");
});
};
var timeout = null;
$(window).resize(function () {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(equalize, 250);
});
equalize();
});
感谢大家!