javascript - 等列 jQuery

Question

我一直在开发一个需要相等列的网站。我正在使用以下代码:

<script type="text/javascript">
 (function() {
    function equalHeights(selector) {
      var maxHeight = 0;

      function calcEqualHeight() {
        var el = $(this);
        maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
      }

      selector.each(calcEqualHeight).height(maxHeight);
    }

    equalHeights($('.exampleclass1'));
    equalHeights($('.exampleclass2'));
  })();
</script>

问题是，有时当页面加载时，高度并不总是正确并且内容重叠。我想知道如何更改它来计算页面加载的高度？

Answer 1

不要使用 JS 来完成 CSS 的工作。

.column1 {background-color: #fcc}
.column2 {background-color: #cfc}

.columns {
  display: flex;
  align-items: stretch;
}
.columns>div {
  flex: 1 0 0;
}

<div class="columns">
  <div class="column1"><p>Short column</p></div>
  <div class="column2">
    <p>Tall column</p>
    <p>Look at how tall I am!</p>
  </div>
</div>