Question

我有以下函数来计算.node的高度。然后，它会从.node-image的高度中删除可能图像的高度.node，并将列.node-content-column设置为具有差异的高度（即500 - 50 = 450;列高度为450。）

function initColumnSizer() {
  imageHeight  = $('.node-image').outerHeight(true);
  resizeHeight = ($('.node').outerHeight() + 75) - imageHeight;
  $('.node-content-column').removeAttr('style');
  $('.node-content-column').css('min-height', resizeHeight);
  $('.node-content-column').css('height', 'auto !important');
  $('.node-content-column').css('height', resizeHeight);
}

在页面加载时调用此函数，并按预期调整.node-content-column的大小。

当使用.node切换jQuery.toggle()内的div时，也会调用它，但此计算每次都会返回一个更大的数字，而不是在恢复此切换后还原为原始数字。

任何人都可以看到我在这个计算中出错了吗？或者如果我以错误的方式解决它？

提前致谢！卡尔

Answer 1

1）问题可能出在outerHeight（）函数中（它考虑了填充和边框）。请尝试使用height or clientHeight:

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

2）为什么你需要清理整个元素的风格？然后你尝试分配height = auto，之后：height = resizeHeight - 目的是什么？检查代码的逻辑。

Answer 2

outerHeight(true)将返回height + padding + border + margin。可能您可能想使用height()？

Answer 3

最有可能的是“每次更大的数字”始终存在恒定差异 - 例如75。可能你只是在.node-content-column和.node？之间有一些依赖

如果像.node-content-column，.node和.node-image这样的节点都是单个节点，那么最好为它们使用ID - 而不是CSS类。

切换高度时，jQuery计算不会按预期加起来

3 个答案: