Как я могу гарантировать, что два div всегда имеют одинаковую высоту?

Question

Я использую фреймворк jquery-mobile.У меня есть два div s бок о бок (в виде столбцов), я пытаюсь сохранить их высоту одинаковой независимо от того, сколько данных они содержат.

Это 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());       
    }

Как мне этого добиться?

Answer 1

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;
}

Answer 2

Рабочая ссылка: 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 и затем выбираю и селектор и устанавливаю высоту.

Answer 3

Для этого мы используем плагин jquery (я полагаю), называемый «equheights».Кажется, их несколько, но все они, похоже, выполняют одну и ту же работу.(Я не выбрал этот в нашем проекте, поэтому я не знаю точно, какой именно мы используем, но они кажутся примерно одинаковыми)

Взгляните на этот плагин или этот плагин , я думаю, они делают то, что вы хотите.

Answer 4

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

Надеюсь, это поможет.

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

Просто посмотрите в jQuery Mobile

Answer 6

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

попробуйте