javascript - 如何使两个不相关的外部 div 的内部 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。

我需要做的是:

使第1列中的每个内部div的高度等于第2列中相应的内部div的高度，这意味着:

col#1 中 div#1 的高度 = col#2 中 div#1 的高度
和
col#1 中 div#2 的高度 = col#2 中 div#2 的高度等

请注意:
- 从数据库动态创建的文本和翻译，所以我不知道 div 的大小是多少。
- 有时文本高度会大于翻译高度，而有时翻译高度会更大。
- 我想将滚动条保留在两列中，因为我想让用户能够仅在一列中滚动或滚动两列彼此同步，所以我认为将文本和相应的翻译放入一个 div 中不行。- 将有一个 +300 的内部 div/页面，所以如果你将使用 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])
  }
}

我认为这会相当快，至少比在每个元素上设置高度要快。对于响应式或移动环境，绝对有一些工作要做，所以这无论如何都不是理想的场景，但希望这能满足您的需求。