如何使两个不相关的外部div在高度上相等？

Question

我在一个翻译/词典网站上工作，其中有两列，一列包含文本，另一列包含另一种语言的翻译/意思。

这是我现在取得的成就的一支笔，https://codepen.io/anon/pen/GMVrvR?editors=0100

HTML

        <div class="chapter" style="direction: ltr;">
            <p class="">
                col#1
            </p>
        </div>

        <div id ="left" class="lines" style="height: 532px; margin-right: -17px;" tabindex="0">
            <div class="line" >
                <span class="index-no">1</span><span class="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</span>
            </div>
            <div  class="line" >
                <span class="index-no">2</span><span class="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo </span>
            </div>
            <div class="line" >
                <span class=" index-no">3</span><span class="">parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </span>
            </div>
            <div class="line" >
                <span class=" index-no">4</span><span class="">. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</span>
            </div>
            <div class="line" >
                <span class=" index-no">5</span><span class="">Sed fringilla mauris sit amet nibh.</span>
            </div>
            <div class="line" >
                <span class=" index-no">6</span><span class="">Sed fringilla mauris sit amet nibh.</span>
            </div>
            <div class="line" >
                <span class=" index-no">7</span><span class="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </span>
            </div>
            <p class="blank-line"></p>
        </div>

    </div>
</div>
<div class="block" style="width: 600px; height: 686px; ">
    <div class="block-inner">
        <div class="chapter" style="direction: ltr;">
            <p class="">
                col#2
            </p>
        </div>

        <div id ="right" class="lines" style="height: 532px; margin-right: -17px;" tabindex="0">
            <div class="line" >
                <span class="index-no">1</span><span >Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,</span>
            </div>
            <div class="line">
                <span class="index-no">2</span><span class=""> A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of </span>
            </div>
            <div class="line" >
                <span class="index-no">3</span><span class="">packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her ho</span>
            </div>
            <div class="line" >
                <span class="index-no">4</span><span class="">the first hills of the Italic Mountains, she had a last view back on the skyline of her</span>
            </div>
            <div class="line" >
                <span class="index-no">5</span><span class=""> The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks </span>
            </div>
            <div class="line">
                <span class="index-no">6</span><span class="">the first hills of the Italic Mountains, she had a last view back on the skyline of her</span>
            </div>
            <div class="line">
                <span class="index-no">7</span><span class="">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of!</span>
            </div>
            <p class="blank-line"></p>
        </div>

    </div>
</div>

​

如您所见，每一列都包含包含文本/翻译的内部div。

我需要做的是：

使column#1中每个内部div的高度等于column#2中相应的内div高度，这意味着：

div#1在col#1中的高度= div#1在col#2中的高度

和

div#2在col#1中的高度= div#2在col#2中的高度等。

请注意：

• 从数据库中动态创建的文本和翻译，所以我不知道div的大小。 -Sometimes，文本高度将大于翻译高度，而其他时候，翻译高度会更大。
• 我希望将滚动条保留在2列中，因为我想让用户只在一列中滚动，或者让2列同步滚动，所以我认为使文本和相应的翻译成一个div是行不通的。-将有一个+300内部div/page，所以如果您使用java-script/jquery来解决这个问题，我希望它将是快速的。

那么，使相应的div保持相同高度的最佳方法是什么呢？

Answer 1

使用jQuery：https://codepen.io/anon/pen/gGVGwj

// Create two arrays for the left element heights and the right element heights
var leftArray = [];
var rightArray = [];

// Get the height of each .line element and save it to the appropriate array
$('#left .line').each(function(i) {
  leftArray.push($(this).height());
});
$('#right .line').each(function(i) {
  rightArray.push($(this).height());
});

// For each element on the left, if its height is smaller than the
// corresponding element on the right, set its height via css to 
// equal the right-side element, and vice versa. Nothing to do if 
// the heights are equal.
for (var i = 0; i < leftArray.length; i++) {
  if (leftArray[i] < rightArray[i]) {
    $('#left .line').eq(i).css('height', rightArray[i])
  } else if (leftArray[i] > rightArray[i]) {
    $('#right .line').eq(i).css('height', leftArray[i])
  }
}

我认为这将是相当快，至少比设定一个高度的每一个元素。对于响应环境或移动环境，绝对有一些工作要做，所以这绝不是一个理想的场景，但希望这能实现您想要的效果。

Answer 2

检查下面的代码。我用的是flex。

​

.container {
  display: flex;
  flex-wrap: wrap;
}

.container .cell {
  flex-basis: calc(50% - 40px);
  padding: 10px;
}

.container .header {
background: #ccc;
}

<div class="container">

 <div class="header cell">Original</div>
 
 <div class="header cell">Translation</div>

  <div class="cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</div>

  <div class="cell">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,</div>
  
   <div class="cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</div>

  <div class="cell">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,</div>
  
   <div class="cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</div>

  <div class="cell">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,</div>
</div>

​

Answer 3

jQuery解决方案：

function sameHeight(leftId,rightId){
    $('#'+ leftId + ' .line').each(function(i){
        var h = $(this).outerHeight(); // get height
        $(this).css('height', h); // set height to left
        $('#' + rightId + ' .line').eq(i).css('height', h); // set height to right
    });
}
sameHeight('left','right');