Question

这个问题紧接着我最近在这里问到的问题： Matching column height in 2column layout

我应用了建议的JQuery修复，但我现在遇到的问题是，如果页面加载时显示的列集的高度比左侧子菜单项所选择的另一个更短，则内容列中的文本会运行页脚。

http://www.pcbuddies.co.za/Services/Default.aspx（点击硬件修复链接查看）

以下是代码：

<!-- 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 -->

我知道JQuery可能不是最好的方法，但我只想在应用CSS解决方案时将其用作快速修复。

任何人都可以在代码或逻辑中看到问题，这些问题会说明为什么点击#hardwareitem不会改变列高？

Answer 1

您可能需要考虑完全绕过JavaScript。有一种众所周知的方法叫做faux column，可以用CSS来实现你想要的东西：

http://www.alistapart.com/articles/fauxcolumns/

动态设置列高

1 个答案: