我以前从未遇到过这个问题,但我似乎找不到解决方案,所以我希望你们能帮助我。
jQuery
function setTheHeight() {
if( $('#main.level1 .block.attention .block-content').length ) {
//Get value of highest element
var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
function() {
return $(this).height();
}
));
console.log(maxHeight);
$('#main.level1 .block.attention .block-content').height(maxHeight);
}
}
setTheHeight();
$(window).resize(function() {
setTheHeight();
});
基本上,此函数的作用是检查最高的 div 并将所有选定的 div 的高度设置为该高度。这很好用。但它是响应式设计,因此当用户调整浏览器大小时,内容会变小,div 会变高。所以我添加了一个调整大小事件。该事件正在被触发,但它并没有改变高度。知道为什么调整大小没有改变高度吗?
快速 jsFiddle 显示发生了什么:http://jsfiddle.net/3mVkn/ http://jsfiddle.net/3mVkn/
FIX
嗯,这简直是愚蠢的。因为我正在设置 height() 它已经被修复了,所以我所要做的就是重置高度并且它起作用了。
更新的代码:
function setTheHeight() {
if( $('#main.level1 .block.attention .block-content').length ) {
//Reset height
$('#main.level1 .block.attention .block-content').height('auto');
//Get value of highest element
var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
function() {
return $(this).height();
}
));
console.log(maxHeight);
$('#main.level1 .block.attention .block-content').height(maxHeight);
}
}
setTheHeight();
$(window).resize(function() {
setTheHeight();
});
这与 jQuery 无关,而是与 CSS 相关。这是因为一旦您将 .block-content 的高度设置为某个值,在调整窗口大小后,这些 .block-content 的高度将不会改变,因为高度不再设置为auto
但达到某个预定义值。
解决方案是使用return $(this)[0].scrollHeight
代替return $(this).height()
这样它将返回内容的真实高度,而不是 CSS 定义的高度。
EDIT:
解决方案实际上是计算 .block-content 内所有子元素的高度,然后返回该值。我在这里编辑了你的代码http://jsfiddle.net/3mVkn/12/ http://jsfiddle.net/3mVkn/12/
这应该会给你所需的结果。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)