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

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

这是我主要得到的。这就是我想要实现的目标。稍微精确一点，滚动条被隐藏了。我对 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高度。然后将(aside1 + side2) 应用于.totalarticle

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

查看示例笔。