用于在两个 div 上设置相等高度的 jQuery 函数

Question

我试图实现自己的函数来均衡两个 div 的高度，但出现了一些奇怪的行为。这是我目前正在做的一个例子 - JSFiddle

当我在我的计算机上测试它时，我没有遇到这个问题，但你可以在 fiddle 示例中看到，当你最小化然后最大化浏览器时，最终结果不是目标。

我在计算机上遇到的问题是，当我按下 F5 或调整大小时它工作正常，但如果我按下 Ctrl + F5 #vertical -menu 会随着 #vertical-content 变短，如果我再次按下 F5，它就会被调整。

Ctrl + F5 的问题似乎没什么大不了的，但我仍然想找到解决它的方法。但现在我在 Fiddle 示例中得到了这种奇怪的行为，我开始认为我的函数可能无法正常工作。

那么我怎样才能修复我的功能以每次正确调整高度。 Ctrl + F5 的问题是它与函数有关，还是与此组合键的作用更相关，而且仍然 - 我可以避免在这种情况下我的 div 大小不正确吗？使用 jQuery 调整大小是一种好方法吗？当我第一次寻找人们如何调整高度时，我看到了一些对我来说更像是设置大负边距的东西，比如 margin-bottom: -10000px 然后大填充 - padding-bottom: 10000px; 但是因为我没有完全理解这背后的想法，因为我认为 JavaScript/Jquery 会是我决定使用 jQuery 函数的更简洁的方式，但是如果我得到太多H-cases 使用这个 hack 而不是 jQuery 函数更好吗？

Answer 1

我看不到您遇到的刷新问题，但我确实注意到，如果您将窗口变小，然后将窗口大小重新调整为更大的视口(viewport)，菜单不会随内容一起缩小。我发现将 jQuery 稍微更改为这意味着它会查看菜单比内容长或短的两种情况:

http://jsfiddle.net/xchu5/2/

function calcHeight() {
    var contentHeight = $('#vertical-content').height();
    var menuHeight = $('#vertical-menu').height();
    var windowHeight = $(window).height();
    if (menuHeight < contentHeight) {
        $('#vertical-menu').css('height', contentHeight + 40 + 'px');
    }
    else if (menuHeight > contentHeight) {
        $('#vertical-menu').css('height', contentHeight + 40 + 'px');
    }
}
$(document).ready(calcHeight);
$(window).bind("resize",calcHeight);