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

Question

大家好，我搜索了很多，但找不到适合我的答案。这是我的问题：

我现在指定我正在使用 Bootstrap。我有 2 个列是这样工作的：

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

想法是将内容放在与 Aside1 和 Aside2 相同的高度，并在内容中加入 overflow:scroll。

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 is what I mainly got. And 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 在文档就绪时调用函数并 window 调整大小。在函数内部，您需要使用 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 pen。

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

How to put column of same height using overflow on one of them?

html

css

twitter-bootstrap

height

two-columns