Javascript 使用“时，列重叠”；Ben Howdle Easy Peasy等高人造柱“；

我正在使用Ben Howdle的javascript解决方案来伪造列。他在他的站点上有两个实现：

一个用于一行，另一个用于两行

我在两排使用它。我使用了他建议使用的代码片段来代替他给出的一行代码

我想知道是他漏掉了那个信息，还是我后来做错了什么。如果以一定的大小加载页面，效果很好，但一旦开始调整大小，列就会重叠。以下是我的url示例：

这是他为页面上的多个集合建议的代码：

<div class="sameHeights">
    <div data-key="sameHeights"></div>
    <div data-key="sameHeights"></div>
    <div data-key="sameHeights"></div>
    <div data-key="sameHeights"></div>
    <div data-key="sameHeights"></div>
</div>

<div class="otherSameHeights">
    <div data-key="otherSameHeights"></div>
    <div data-key="otherSameHeights"></div>
    <div data-key="otherSameHeights"></div>
    <div data-key="otherSameHeights"></div>
    <div data-key="otherSameHeights"></div>
</div>

and 

<script type="text/javascript">
    if ('addEventListener' in window) {
        // first group
        window.addEventListener('resize', function(){
            sameHeights('[data-key="sameHeights"]');
        });
        window.addEventListener('load', function(){
            sameHeights('[data-key="sameHeights"]');
        });

        // second group
        window.addEventListener('resize', function(){
            sameHeights('[data-key="otherSameHeights"]');
        });
        window.addEventListener('load', function(){
            sameHeights('[data-key="otherSameHeights"]');
        });
    }
</script>

及
如果（'addEventListener'在窗口中）{
//第一组
addEventListener（'resize'，function（））{
相同权重（'[data key=“sameHeights”]'）；
});
addEventListener（'load'，function（））{
相同权重（'[data key=“sameHeights”]'）；
});
//第二组
addEventListener（'resize'，function（））{
相同权重（'[data key=“otherSameHeights”]'）；
});
addEventListener（'load'，function（））{
相同权重（'[data key=“otherSameHeights”]'）；
});
}

但他没有就实际功能的改变给出任何建议：

<script type="text/javascript">
    function sameHeights(selector) {
        var selector = selector || '[data-key="sameHeights"]',
            query = document.querySelectorAll(selector),
            elements = query.length,
            max = 0;
        if (elements) {
            while (elements--) {
                var element = query[elements];
                if (element.clientHeight > max) {
                    max = element.clientHeight;
                }
            }
            elements = query.length;
            while (elements--) {
                var element = query[elements];
                element.style.height = max + 'px';
            }
        }
    }
</script>

功能相同权重（选择器）{
变量选择器=选择器| |'[data key=“sameHeights”]，
query=document.queryselectoral（选择器），
元素=query.length，
max=0；
如果（元素）{
而（元素--）{
var元素=查询[元素]；
如果（element.clientHeight>max）{
最大值=元素clientHeight；
}
}
元素=query.length；
而（元素--）{
var元素=查询[元素]；
element.style.height=max+'px'；
}
}
}

---

这个问题的第二部分是当窗口调整到移动视图时，单个列之间有很大的空间。单栏不需要javascript等高，需要在这一栏停用。

在我看来，flexbox就是一个例子。我给Ben发了电子邮件，得到了回复。他以前没有见过这个问题，但他有一个解决办法。将

eqheights.js

文件中的“clientHeight”改为“scrollHeight”。成功了。谢谢你@Paulie_D。。。我计划在某个时候看看flexbox。