Question

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

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

我在计算机上遇到的问题是，当我点击F5或调整其大小正常时，如果我点击Ctrl + F5，#vertical-menu会缩短#vertical-content如果我再次按下F5它会被调整。

Ctrl + F5的问题似乎不是什么大问题，但我仍想找到解决问题的方法。但是现在我在小提琴例子中得到了这种奇怪的行为，我开始认为我的功能可能不正常。

那么如何修复我的功能以便每次都适当调整高度。 Ctrl + F5的问题是它与函数有关，或者它与这个组合键的作用有什么关系，并且仍然 - 我可以避免在这种情况下我的div的大小不正确吗？并且正在使用jQuery调整大小的方法吗？当我第一次看到人们如何做这个调整高度的事情时，我看到了一些似乎更像是黑客的东西，设置了大的负余量，如margin-bottom: -10000px然后大填充 - padding-bottom: 10000px;，但因为我没有'完全理解这背后的想法，因为我认为JavaScript / Jquery将是我决定使用jQuery函数的更简洁的方式，但是如果我得到太多的H-case，那么使用这个hack而不是jQuery函数会更好吗？ / p>

Answer 1

我看不到你得到的刷新问题，但是我确实注意到如果你把窗口缩小了，然后将窗口大小调整回更大的视口，菜单没有缩小内容。我发现稍微改变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);

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

1 个答案: