具有等高ui块的jquery移动ui网格

我正在尝试使用jquerymobile中的内置ui网格进行3列布局

问题是ui块内的ui栏的高度不同。我希望所有的3根柱子都和最高的柱子一样高

有人知道这个问题的简单解决方法吗？我想用CSS来解决这个问题，但我没有做到。JS真的是这个问题的唯一解决方案吗

JsFiddle：

代码：

页眉第1页
A.
B
B有很多文字

有很多台词

另一行

页脚
根据我的经验，唯一“可靠”的解决方案是使用简单的jquery高度比较。只需要几行

var tallest = 0;
$('.ui-grid-b > div').each(function() {
    var thisHeight = $(this).height();
    if(thisHeight > tallest) {
        tallest = thisHeight;
    }
});
$('.ui-grid-b .ui-bar').height(tallest);

或者将其作为函数执行，请参见

另一方面，如果您不想使用CSS，那么有一种使用box模型的错误/不可修复的方法。
见：

除此之外，还有一些HTML/CSS攻击，虽然有效，但会产生“丑陋”的代码。
见：


jQuery示例：

以及一个缩小的示例（仅当内容始终位于
.ui栏中时才有效）

根据我的经验，唯一“可靠”的解决方案是使用简单的jquery高度比较。只需要几行

var tallest = 0;
$('.ui-grid-b > div').each(function() {
    var thisHeight = $(this).height();
    if(thisHeight > tallest) {
        tallest = thisHeight;
    }
});
$('.ui-grid-b .ui-bar').height(tallest);

或者将其作为函数执行，请参见

另一方面，如果您不想使用CSS，那么有一种使用box模型的错误/不可修复的方法。
见：

除此之外，还有一些HTML/CSS攻击，虽然有效，但会产生“丑陋”的代码。
见：


jQuery示例：

以及一个缩小的示例（仅当内容始终位于
.ui栏中时才有效）

我遇到了同样的问题——我的解决方案可能比上面的解决方案更通用——应该适用于任何网格


我对网格中的网格有一个问题——这是我的JSFIDLE


可以更改网格中的内容，高度将调整大小

下面是我的实用程序类，它实现了这一点——这可能有点过头了：

var ekJqm = {};

ekJqm.utilities = {
    fixGrids: function (container) {
        $("[class^=ui-block-]").each(function () {
            $(this).removeAttr("style");
            $(">div", this).removeAttr("style");
        });
        var fixBlocks = function (blocks) {
            blocks = $(blocks);
            var heights = [];
            blocks.each(function () {
                if ($.inArray($(this).height(), heights) == -1)
                    heights.push($(this).height());
            });
            if (heights.length == 1)
                return;
            var maxHeight = 0;
            blocks.each(function () {
                if ($(this).height() > maxHeight)
                    maxHeight = $(this).height();
            });
            blocks.each(function () {
                $(this).height(maxHeight);
                var adjust = $(">div", this).outerHeight() - $(">div", this).height();
                $(">div", this).height(maxHeight - adjust);
            });
        };

        $("[class^=ui-grid-]", container).each(function () {
            var maxHeight = 0;
            var blocks = $(">[class^=ui-block-]", this);
            var set = [];
            var tempSet = [];
            blocks.each(function (index) {
                var _class = $(this).attr("class");
                if ($.inArray(_class, tempSet) >= 0) {
                    fixBlocks(set);
                    tempSet = [];
                    set = [];
                }
                set.push(this);
                tempSet.push(_class);
                if (index == blocks.length - 1)
                    fixBlocks(set);
            });
        });
    }
};

我遇到了同样的问题——我的解决方案可能比上面的解决方案更通用——应该适用于任何网格


我对网格中的网格有一个问题——这是我的JSFIDLE


可以更改网格中的内容，高度将调整大小

下面是我的实用程序类，它实现了这一点——这可能有点过头了：

var ekJqm = {};

ekJqm.utilities = {
    fixGrids: function (container) {
        $("[class^=ui-block-]").each(function () {
            $(this).removeAttr("style");
            $(">div", this).removeAttr("style");
        });
        var fixBlocks = function (blocks) {
            blocks = $(blocks);
            var heights = [];
            blocks.each(function () {
                if ($.inArray($(this).height(), heights) == -1)
                    heights.push($(this).height());
            });
            if (heights.length == 1)
                return;
            var maxHeight = 0;
            blocks.each(function () {
                if ($(this).height() > maxHeight)
                    maxHeight = $(this).height();
            });
            blocks.each(function () {
                $(this).height(maxHeight);
                var adjust = $(">div", this).outerHeight() - $(">div", this).height();
                $(">div", this).height(maxHeight - adjust);
            });
        };

        $("[class^=ui-grid-]", container).each(function () {
            var maxHeight = 0;
            var blocks = $(">[class^=ui-block-]", this);
            var set = [];
            var tempSet = [];
            blocks.each(function (index) {
                var _class = $(this).attr("class");
                if ($.inArray(_class, tempSet) >= 0) {
                    fixBlocks(set);
                    tempSet = [];
                    set = [];
                }
                set.push(this);
                tempSet.push(_class);
                if (index == blocks.length - 1)
                    fixBlocks(set);
            });
        });
    }
};

谢谢大家！我明白了，javscript解决方案似乎是最好的解决方案。但不幸的是，我正在用ajax加载页面。我已经为我的页面注册了“pageinit”事件，但每个ui栏的高度始终返回为0。我现在正在调查，然后我会回来报告是的，它变得有点像那样棘手。我想我会把它变成一个函数，加载成功后，如果内容包含“.equal height”或类似的内容，就运行该函数。如果同一个函数必须加载不同的页面，则会变得非常棘手：）差不多了！绑定到“pageshow”“事件为我提供了每个ui栏的正确高度。但这有一个丑陋的副作用，即新高度在1-2秒后应用，因此我在应用“最高高度”之前看到原始高度。而且，这仅在通过ajax导航时有效。重新加载整个页面后，它将不再工作。一开始使用jquery mobile感觉很奇怪。还不确定我是否喜欢它。尽管如此，还是将您的答案标记为已回答，因为这解决了我最初的问题，非常感谢！嗯，不应该花那么长时间。。也许给它一个相对高的css“min height”是个好主意，让它看起来更正常，然后jquery会用正确的值覆盖它。谢谢大家！我明白了，javscript解决方案似乎是最好的解决方案。但不幸的是，我正在用ajax加载页面。我已经为我的页面注册了“pageinit”事件，但每个ui栏的高度始终返回为0。我现在正在调查，然后我会回来报告是的，它变得有点像那样棘手。我想我会把它变成一个函数，加载成功后，如果内容包含“.equal height”或类似的内容，就运行该函数。如果同一个函数必须加载不同的页面，则会变得非常棘手：）差不多了！绑定到“pageshow”“事件为我提供了每个ui栏的正确高度。但这有一个丑陋的副作用，即新高度在1-2秒后应用，因此我在应用“最高高度”之前看到原始高度。而且，这仅在通过ajax导航时有效。重新加载整个页面后，它将不再工作。一开始使用jquery mobile感觉很奇怪。还不确定我是否喜欢它。尽管如此，还是将您的答案标记为已回答，因为这解决了我最初的问题，非常感谢！嗯，不应该花那么长时间。。也许给它一个相对高的css“min height”是个好主意，让它看起来更正常，然后jquery会用正确的值覆盖它。嗨，ek_ny，谢谢你的回答。自从我用Marco Johannessen的上一个解决方案解决了你的问题后，我还没有尝试过你的解决方案，但我相信它会对其他人有所帮助。干杯Simon@Simon-我的荣幸--如果它被内置到jquery mobile中，那就太好了……）@ek_ny-JQM不是开源的吗？成为一名贡献者，并将您的代码添加到下一版本中！嗨，伊库，谢谢你的回答。自从我用Marco Johannessen的上一个解决方案解决了你的问题后，我还没有尝试过你的解决方案，但我相信它会对其他人有所帮助。干杯Simon@Simon-我的荣幸--如果它被内置到jquery mobile中，那就太好了……）@ek_ny-JQM不是开源的吗？成为一名贡献者，并将您的代码添加到下一版本中！