想要将两个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>