JavaScript 边框高度函数--匹配两个元素

Question

我确定之前有人提出过这个问题，但在网络上还没有找到足够的答案。

我的 index 页面包含两列，它们在视觉上被一条垂直线(边框)等分。为实现这一点，我在第一(左)列上使用了 border-right 属性。

如何编写一个 始终 匹配两列边框高度的 JS 函数？

更新:我正在为两列使用 css nth-child 1 和 2。

更新 2:怎么样？

function getHeight(class) {
    return document.getElementByClass(class).offsetHeight;
}

var maxHeight = Math.max( getHeight( "article:nth-child(odd)" ), getHeight( "article:nth-child(even)" );

var nOdd = document.getElementByClass( "article:nth-child(odd)" );
var nEven = document.getElementByClass( "article:nth-child(even)" );

nOdd.style.height = maxHeight;
nEven.style.height = maxHeight;

Answer 1

这是一个纯 CSS 解决方案:

DEMO

CSS

.wrapper {
  display: flex;
}
section {
  flex: 1;

}
section:first-child {
  border-right: 1px solid gray;
}

html

<div class="wrapper">
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus sum dolor sit amet, consectetur adipisicing elit. Ducimus assumenda tempore, obcaecati similique mollitia, ipsa dolorum nihil  dolor </section>
  <section>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus assumenda tempore, obcaecati similique mollitia, ipsa dolorum nihil placeat maiores eius cupiditate ipsam harum recusandae, quia accusamus. Quae a illo, amet.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus assumenda tempore, obcaecati similique mollitia, ipsa dolorum nihil placeat maiores eius cupiditate ipsam harum recusandae, quia accusamus. Quae a illo, amet.
  </section>
</div>