要求在页面加载时将div设置为其高度的最大值

Question

客户端正在使用内容管理系统将文本注入到代表按钮的2个div中。我希望按钮的高度相等。问题是：

• 如果我一套等于两个使用CSS的高度，那么，只有当客户端不输入太多的文字作品。
• 如果我没有使用CSS设置高度，那么只有当客户端在两个文本中输入相同行数的文本时才起作用。

所以我认为JQuery将在这一个来救援。你能帮我弄清楚使用哪些函数吗？

问题的概要是：

<div id="button1"> 
    <p>Here's some text that the client will control.</p> 
</div> 
<div id="button2"> 
    <p>Here's some more text that the client will control</p> 
</div> 

<script type="text/javascript"> 
    /* Here will go some JS to make button1 and button2 the height of whichever one is taller when the page has loaded the client's text that the CMS injected */ 
</script> 

Answer 1

没有JQuery的...让他们display: table-cell元素，他们将彼此的高度自动匹配...

#button1, #button2 { 
 
    display: table-cell; 
 
    width: 50%; 
 
    border: 1px solid red; 
 
}

<div id="button1"> 
 
    <p>Here's some text that the client will control.</p> 
 
</div> 
 
<div id="button2"> 
 
    <p>Here's some more text that the client will control Here's some more text that the client will control Here's some more text that the client will control Here's some more text that the client will control</p> 
 
</div>

Answer 2

jQuery解决方案

http://jsfiddle.net/OxyDesign/hyo0zsfj/

HTML

<div class="button" id="button1"> 
    <p>Here's some text that the client will control.</p> 
</div> 
<div class="button" id="button2"> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
</div> 
<div class="button" id="button3"> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
    <p>Here's some more text that the client will control</p> 
</div> 

JS

$(document).ready(function(){ 
    var buttons = $('.button'), 
     btnsLgth = buttons.length, 
     biggerHeight = 0; 

    for(var i = 0; i < btnsLgth; i++){ 
     var btnHeight = buttons.eq(i).height(); 
     if(btnHeight > biggerHeight) biggerHeight = btnHeight; 
    } 
    buttons.height(biggerHeight); 
}); 

Answer 3

例如，您可以采取的最大高度，并将其应用到两个，下面一个简单的jQuery解决方案：

$(document).ready(function(){ 
// wait until the document is ready 
// 1 : grab the default height of the two divs 
var button1Height = $('#button1').css('height'); // example 50px 
var button2Height = $('#button2').css('height'); // example 60px 

// 2: we have to remove the suffix px and we can achieve this by using replace method 
button1Height = button1Height.replace('px',''); // now the value is 50 
button2Height = button2Height.replace('px',''); // now the value is 60 

//3: now choose the max between the two heights and make it the height of both 

if(button1Height >= button2Height){ 
$('#button2').css('height',button1Height+'px'); 

}else{ 
$('#button1').css('height',button2Height+'px'); 
} 

// now #button1 and #button2 should have the same height 
button1NewHeight = $('#button1').css('height'); 
button2NewHeight = $('#button2').css('height'); 

// you should get button1NewHeiht == button2NewHeight 

});