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

我相信这是以前提过的，但在网上还没有找到足够的答案

我的

索引

页面包含两列，这两列在视觉上被垂直线（边框）等分。为了实现这一点，我在第一（左）列上使用了

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;

---

这不是一个只使用Javascript的解决方案，而是一个只使用CSS的解决方案

使用CSS

background

属性

---

创建一个1x1图片，并为父容器重复此操作。

这里有一个仅用于css的解决方案：

css

html

Lorem ipsum dolor sit amet，奉献精英。他是一位杰出的政治家。暂时性假盲症，类似于软组织的盲囊病，同侧盲囊病
Lorem ipsum dolor sit amet，奉献精英。暂时性盲囊，类似于软体动物的盲囊，无需放置在最长的位置，如铜酸盐，无需重复使用。阿梅特。
Lorem ipsum dolor sit amet，奉献精英。暂时性盲囊，类似于软体动物的盲囊，无需放置在最长的位置，如铜酸盐，无需重复使用。阿梅特。

$（“#col2”）.height（$（“#col1”）.height（））

意味着

col2

将具有与

col1

相同的高度，但是它完全取决于col2和1中的内容。看到您用jQuery标记了它，我假设您正在使用它。使用jQuery选择两列并比较它们的高度。然后将较小的高度设置为与较大的列相同的高度。@Praveen——只要这两列是静态的，这就可以工作。但是，当它们的长度被扩展（JS动画）时，不会保持相同的高度。如果更改其中一列的长度，则显然需要重新计算。我将对此进行研究。你能给我看一个JS中的示例函数吗？这里的border width属性有什么用途。上面的代码没有意义。你能解释一下它的作用以及它如何帮助解决原来的问题吗？？？我认为这个问题与背景无关

function getBorderHeight(){
    var el = document.getElementsByClassName('.border')[0];
    var c_height = el.style.height;
    var b_height = el.style.borderWidth;
    return c_height+b_height*2;
}

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

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

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