javascript - 希望两个 div 在页面加载时都设置为它们的最大高度

Question

客户正在使用内容管理系统将文本注入(inject)代表按钮的 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>