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

大家好，所以我已经搜索了很多，但我找不到任何适合我的答案。我的问题是：

我现在指定使用的是引导。我有两个专栏是这样工作的：

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

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

$(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);
};

---

这是我主要得到的。这就是我想要实现的。稍微精确一点，滚动条是隐藏的。我对JavaScript jQuery或任何类型的提议都持开放态度。

在您的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>

---

请参阅

是的，这会起作用，但实际上我正在处理响应性内容，因此如果我调整页面大小，列的高度将不再相同。但是谢谢你的快速回答。哼，这两个都不是因为列的宽度是页面宽度的%，所以高度一直在改变。Ps：您可以使用overflow:auto自动生成overflow-x。您能更好地解释一下您想要实现的目标吗？也许如果你有一些css代码，你可以在你的帖子中包含它吗？完成了，如果你还想看一看：）Nup id想要屏幕的大小（大于991px），两列在同一高度连接，这样它就形成了一个块。如第二个屏幕所示。