如何确保两个 div 始终具有相同的高度？答案

【问题标题】：How can I ensure that two divs always have the same height?如何确保两个 div 始终具有相同的高度？
【发布时间】：2011-09-29 14:56:02
【问题描述】：

我正在使用 jquery-mobile 框架。我有两个并排的divs（作为列），无论它们包含多少数据，我都试图保持它们的高度相同。

这是html：

  <ul class="datablock" id="Manufacturing_and_Qualification_Information" style="display: none;">    
 <div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
     <div data-theme="d" id="paramBlk" class="ui-block-m"><li>Blah Blah Blah Blah Blah</li></div> 
     <div data-theme="d" id="valueBlk" class="ui-block-n"><li>Blah</li></div>
</div>  
<div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
    <div class="ui-block-m" id="leftBtmRnd"><li>Blah Blah Blah Blah Blah</li></div> 
    <div class="ui-block-n" id="rightBtmRnd"><li>Blah</li></div>
</div>
</ul>

这是我尝试过的 jQuery 代码，但它没有按预期工作：

var $blockM = $(".datablock").find('.ui-block-m');  
    var $blockN = $(".datablock").find('.ui-block-n');                  
     if($blockM.height() < $blockN.height()){       
        $blockM.css('height',$blockN.height());        
    }else if($blockM.height() > $blockN.height()){   

        $blockN.css('height',$blockM.height());       
    }

我怎样才能做到这一点？

【问题讨论】：

使用表格来显示表格中的数据？
为什么div 标签直接包含在ul 中？
正如我所说的它是一个移动应用程序...所以我需要以 ul li 格式显示数据..
@James Khoury：使用table 在被过度使用多年后，无缘无故又回到了禁忌。显然“无表”现在被认为是一项功能（不知道为什么）。

标签： jquery css jquery-mobile

【解决方案1】：

工作链接：http://jsfiddle.net/bMMpz/1/

代码如下：

var biggestHeight = 0;
var $blockM;
var $blockN;

$(function() {
    $blockM = $(".datablock").find('.ui-block-m');
    $blockN = $(".datablock").find('.ui-block-n');

    getBiggestHeight();

    $blockN.height(biggestHeight);
    $blockM.height(biggestHeight);
});



function getBiggestHeight() {
    $blockM.each(function(i, e) {
        if ($(e).height() > biggestHeight) biggestHeight = $(e).height()
    });
    $blockN.each(function(i, e) {
        if ($(e).height() > biggestHeight) biggestHeight = $(e).height()
    });
}

我寻找最大的 div，然后选择选择器和设置高度。

【讨论】：

在DOM-ready方法之外真的不需要方法和变量，你可以将它作为方法内部的私有变量使用，如果他愿意，getBiggestHeight可能是一个更通用的方法添加更多项目：jsfiddle.net/bMMpz/2
谢谢哥们..它工作正常...但我又遇到了 1 个问题..当我调整 div 内的窗口内容显示在外面时...我该如何解决这个问题..
您可以尝试 clear:both 和/或 display:block 在您的 div 上，在您的 css 中。没有问题兄弟
实际上它发生在更长的单词上......就像blahblahblahblah......然后它会出现在div的一侧，否则如果我在单词之间有空格，它会正确包装
display:block 还是 inline-block？

【解决方案2】：

为此，我们使用了一个名为“equalheights”的 jquery 插件（我猜）。那里似乎有几个，但他们似乎都做同样的工作。（我没有在我们的项目中选择这个，所以我不知道我们使用的是哪个，但它们似乎有点相等）

看看this plugin或this plugin，我想他们会做你想做的。

【讨论】：

这么小的东西用插件不好...我可以说这只是4到5行jquery代码的问题..
你真的能给出原因吗？这个插件非常小，它只是你从哪里获取代码的问题：你声明的函数，或者你加载的函数。认为“插件”（它实际上只是一个功能）将花费更多时间是一种微优化。并且看到需要多次尝试才能做到这一点，为什么要重新发明轮子？如果代码能让你感觉更好，你甚至可以直接复制代码，但这并没有真正的理由。

【解决方案3】：

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
    tallest = thisHeight;
    }
    });

    group.height(tallest);

    }
    $(document).ready(function() {
    equalHeight($(".ui-grid-m"));
    });

或者使用css3

.datablock
{ display:table;
}
.ui-grid-m
{  display:table-cell;
}

【讨论】：

【解决方案4】：

 if($blockM.height() < $blockN.height())
{               
    $blockM.height($blockN.height());             
}else if($blockM.height() > $blockN.height())
{  
   $blockN.height($blockM.height()); 
}

试试这个

【讨论】：

【解决方案5】：

两列网格

<div class="ui-grid-a">
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div>

Just look in jQuery Mobile

【讨论】：

正如您在我的 html 标记中看到的那样，我使用了与 jquery mobile 链接中编写的相同的类..
但是你已经用UL包裹，然后用LI进行内容展示。

【解决方案6】：

$(document).ready(function({
    var x = $('#primary').height();
    $('#sidebar').css('height', x);
});

希望这会有所帮助。

【讨论】：