标签: equal-heights

我知道这个问题已被问了一百万次,但我正在寻找更具体的东西.

由于我的网站完全响应,我需要基于每行调整div,而不是将所有设置为一个高度.

我使用以下修改代码来设置容器中所有div的高度:

$.fn.eqHeights = function() {
    var el = $(this);
    if (el.length > 0 && !el.data('eqHeights')) {
        $(window).bind('resize.eqHeights', function() {
            el.eqHeights();
        });
        el.data('eqHeights', true);
    }
    return el.each(function() {
        var curTop = 0;
        var curHighest = 0;
        $(this).children().each(function(indx) {
            var el = $(this),
                elHeight = el.height('auto').outerHeight();

            var thisTop = el.position().top;
            if (curTop > 0 && curTop != thisTop) {
                curHighest = 0;
            }

            if (elHeight > curHighest) {
                curHighest = elHeight;
            }

            curTop = thisTop;

        }).height(curHighest);
    });
};

我必须var …

我一直在使用jQuery的这个位(jQuery等高响应div行)来获得相同的高度并且它工作得非常好,但是如果使用相同的模式,它使用BS2和BS3,它不会扫描行以达到相同的高度,它扫描页面本身,然后同一页面上的所有模式(行> col- -)获得页面上最高的高度.这不是理想的实现.

http://jsbin.com/aVavuLeW/14/

上面的JSBin有一个使用BS3列(它的副本)的例子.您不能在堆叠点的列上具有相对位置,因此为了此Bin的目的已复制这些位置.如您所见,如果您在每一行上创建一个不同的类(在此示例中为.foo和.foo2),然后列表现出来,但如果您决定使用相同的模式,则页面上最高的高度将接管.

问题:如何解决使用相同模式的问题,它是根据页面而不是行计算的？

谢谢!!!

我知道很多css很好的解决方案等...简短的告诉我,我希望这个工作,关于我是否有填充,边距,没有额外的标记,阴影,背景颜色......所以......我我只是在寻找它的jquery版本.

在SO上发现了一些.试着申请.好像几乎可以工作.缩小窗口时,文本重叠.如果禁用js,则不会.

http://jsfiddle.net/ApUYv/4/

两个问题:

1)我们如何避免文本重叠？

2)我们应该使用document.ready还是window.load？

请注意:overflow: auto;可能不是一个选项,因为设计师不需要滚动条.:(

请检查这个小提琴:

我想要以下内容:红色列有一些文字,黄色是动态内容,绿色没有,只有一种颜色.我希望红色和绿色列都与黄色内容一样高.height: 100%没工作