Jquery 动态设置列高度

以下是我最近在这里提出的一个问题：

我应用了JQuery建议的修复程序，但现在我遇到了一个问题，即如果页面加载上显示的列集的高度比左侧子菜单项选择的另一个列短，则内容列中的文本将覆盖页脚

（单击硬件修复链接查看）

代码如下：

<!-- JQuery matches the height of one column to the height of the other -->
<script type="text/javascript" src="../Data/jquery.js"></script>
<script type="text/javascript">
    var tallest=0;
    $(document).ready(function(){
        $('.col').each(function(){
            if($(this).height() > tallest)
                tallest = $(this).height();
        });
        $('.col').css('height', tallest + 'px');
    });

    // I had an idea to reset the column matching for the hardware repair
    // menuitem click which didn't work.
    $('#hardwareitem').click(function(){
        $('.col').each(function(){
            if($(this).height() > tallest)
                tallest = $(this).height();
        });
        $('.col').css('height', tallest + 'px');
    });
</script>

<li id="hardwareitem"><a onclick="cycle('hardware');">Hardware Repair</a></li>

<div id="hardware" style="display: none;"><!-- Content goes here --></div>

<!-- JS to change content is simply css class changes to make the selected content visible while hiding the currently visible content -->

var=0；
$（文档）.ready（函数（）{
$（'.col'）。每个（函数（）{
如果（$（this）.height（）>最高）
最高=$（this）.height（）；
});
$（'.col'）.css（'height'，highter+'px'）；
});
//我有一个想法，为硬件修复重置列匹配
//菜单项单击不起作用。
$（“#硬件项”）。单击（函数（）{
$（'.col'）。每个（函数（）{
如果（$（this）.height（）>最高）
最高=$（this）.height（）；
});
$（'.col'）.css（'height'，highter+'px'）；
});
硬件维修

我知道JQuery可能不是实现这一点的最佳方法，但我只想在应用CSS解决方案时将其用作快速修复

---

谁能在代码或逻辑中看到一个问题，它会暗示为什么点击< > >硬核项< /代码>不会改变列的高度？

，你可能想考虑绕过JavaScript来解决这个问题。有一种众所周知的方法叫做faux column's，它可以实现您对CSS的期望：

---

无法回答您的问题，但每当我想做这样的事情时，我都会使用jquery equalHeights插件：@JohnP-我刚看过这个插件，它并不完全是我想要的。我想根据内容列的高度设置列高度，而不是为两列指定固定高度（这是我在JQuery之前所做的）。啊，好的。插件只是将最高容器的高度设置为与选择器匹配的所有容器