Javascript 希望两个div都设置为页面加载时的最大高度

客户端使用内容管理系统将文本注入表示按钮的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>

没有JQuery。。。使它们显示：表格单元格元素，它们将自动匹配彼此的高度

按钮1，按钮2{ 显示：表格单元格； 宽度：50%； 边框：1px纯红； } 下面是一些客户端将控制的文本

这是客户端将控制的更多文本这是客户端将控制的更多文本这是客户端将控制的更多文本这是客户端将控制的更多文本

jQuery解决方案

HTML

JS

---

例如，在一个简单的jquery解决方案下面，您可以采用max height并将其应用于两者：

$(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

});

---

+1另一个CSS选项将是Flexbox布局，但它似乎是一个锤子来敲碎螺母！在本例中。作为jQuery选项，请查看：

$(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);
});

$(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

});