javascript - 如何在其中一个上使用溢出来放置相同高度的列？

Question

我正在使用 Bootstrap 。我有 2 个列是这样工作的:

---------------------
| Content  | Aside1 |
|          |------- |
|          | Aside2 |
---------------------

想法是将内容放在与 Aside1 和 Aside2 相同的高度，并结合溢出:滚动到内容。

HTML:

<div class="container-full">
  <article class="col-md-8 col-xs-12">
    <p>Long content there</p>
  </article>
  <div class="aside_full_screen">

    <aside class="col-md-4 col-xs-12">
      <p>Social Network Content</p>
    </aside>

    <div class="col-md-4 col-xs-12">
      <p>Kitten Content</p>
    </div>
  </div>
</div>

CSS:

 article{ 
  border: 2px solid black;
  background-color: rgba(240, 116, 90, 1);
  overflow: auto;
  height: 1200px; /* — Just there for example, had to be remove — */
}

::-webkit-scrollbar {   /* — For hiding scrollbar — */
    display: none; 
}

Here是我主要得到的。和 here是我想要实现的。精确一点，滚动条被隐藏了。我愿意接受 JavaScript、jQuery 或任何类型的提议。

Answer 1

在您的 HTML 上添加 aside1 和 aside2，如下所示:

<div class="container-full">
  <article class="col-md-8 col-xs-12">
    <p>Long content there: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </article>
  <div class="aside_full_screen">

    <div class="col-md-4 col-xs-12 aside1">
      <p>Social Network Content</p>
    </div>

    <div class="col-md-4 col-xs-12 aside2">
      <p>Kitten Content</p>
    </div>
  </div>
</div>

然后您可以使用 jQuery 在文档就绪和窗口调整大小时调用函数。在函数内部，您需要使用 height() 计算 .aside1 和 .aside2 高度功能。然后将 total(aside1 + aside2)应用于 article。

jQuery:

$(document).ready(myfunction);
$(window).on('resize', myfunction);

function myfunction() {
  var aside1 = $('.aside1').height();
  var aside2 = $('.aside2').height();
  var total = aside1 + aside2;
  $('article').css("height", total);
};

查看 example CodePen .