DEMO

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>

Answer 2

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

Answer 3

这不是一个仅限Javascript的解决方案，但它只是一个CSS解决方案......

使用CSS background属性。

创建1x1 pic并重复父容器。

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

3 个答案:

DEMO