扩展可滚动 div 以匹配另一个 div 的底部答案

【问题标题】：extend scrollable div to match bottom of another div扩展可滚动 div 以匹配另一个 div 的底部
【发布时间】：2016-09-09 02:01:59
【问题描述】：

基本上，我有两列，每列都有不同高度的行 div（动态内容）。在右列，底部 div 有一组可滚动的内容。我想要做的是能够使可滚动的 div 具有最大高度，使其底部与第一列中 div 的末尾对齐。

我看到我的问题和How do I keep two divs that are side by side the same height? 之间的最大区别是我的 2 个 div 不是从同一点开始（由于与 IE 的兼容性问题，我不想使用 flexbox）

非常简单的 plunkr：http://plnkr.co/edit/P1yvJon24xOeb3B9as3P?p=preview

HTML

<div class="row">
  <div class="col-md-8">
    <div class="row row1">randomly heighted content</div>
    <div class="row row2">
      <p>randomly heighted content</p>
      <p>randomly heighted content</p>
      <p>randomly heighted content</p>
      <p>randomly heighted content</p>
      <p>randomly heighted content</p>
      </div>
  </div>
  <div class="col-md-4">
    <div class="row row3">
      <p>random content</p>
    </div>
    <div class="row row4">
      <div class="scroll-container">
        <div class="scroll">
          <p>item1</p>
          <p>item2</p>
          <p>item3</p>
          <p>item4</p>
          <p>item5</p>
          <p>item6</p>
        </div>
      </div>
    </div>
  </div>
</div>

（在 plunkr 中，我希望 item1..item6 与红色 div 的底部对齐）

CSS

.row1 {
  background-color: yellow;
}

.row2 {
  background-color: red;
}

.row3 {
 background-color: blue;
}

.row4 {
  background-color: green;
}

.scroll {
  overflow-y: scroll;
  max-height: 100px;
}

我尝试过的事情： 1）为每个div设置固定高度。这不起作用，因为我需要高度随其他 div 的内容而变化。此外，内部内容不响应固定高度。

2) 我不认为我想使用表格，因为 a) 我听说它的风格很糟糕 b) 没关系/真的不应该是 row1 和 row3 的高度相同

3) Flexbox 是个问题，因为它与百分比填充配合起来效果很差。左上角的 div 是一个带有 0 高度 padding-bottom 技巧的视频，以使其正确预加载空间。因此，一种选择是找到一种绕过 padding-bottom 技巧的方法，然后使用弹性框。

4) 奇怪的填充：100000px；边距：-1000000px；当我尝试时，这个技巧没有奏效，但是我可能只是错过了一个额外的步骤

【问题讨论】：

标签： html css

【解决方案1】：

我认为仅使用 HTML/CSS 是不可能的，因为需要动态确定特定 div 的高度，该高度依赖于不是其父或子的另一个 div。

因此我能够使用 JavaScript 解决它：

http://liveweave.com/3014aD

这里是 Liveweave 应该下架的文件。

index.html

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css"> <!-- Put your style.css below bootstrap, so that your custom css overrides it -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- jQuery -->
    <script src="script.js"></script>
  </head>

  <body>
    <div class="row">
      <div class="col-left col-md-8"> <!-- Added col-left class here -->
        <div class="row1">
          <p>randomly heighted content</p>
        </div>
        <div class="row2">
          <p>randomly heighted content</p>
          <p>randomly heighted content</p>
          <p>randomly heighted content</p>
          <p>randomly heighted content</p>
          <p>randomly heighted content</p>
          </div>
      </div>
      <div class="col-right col-md-4"> <!-- Added col-right class here -->
        <div class="row3">
          <p>random content</p>
        </div>
        <div class="row4">
          <div class="scroll-container">
            <div class="scroll">
              <p>item1</p>
              <p>item2</p>
              <p>item3</p>
              <p>item4</p>
              <p>item5</p>
              <p>item6</p>
              <p>item7</p>
              <p>item8</p>
              <p>item9</p>
              <p>item10</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

style.css

.row1 {
  overflow: auto;
  background-color: yellow;
}

.row2 {
  overflow: auto;
  background-color: red;
}

.row3 {
  overflow: auto;
  background-color: blue;
}

.row4 {
  overflow: auto;
  background-color: green;
}

.scroll {
  overflow-y: scroll;
}

.col-left {
  padding-right: 0px !important;
}

.col-right {
  padding-left: 0px !important;
}

script.js

function SetHeight() {
  var left = $(".col-left").css("height");
  var right = $(".row3").css("height");
  var result = parseInt(left) - parseInt(right);
  $(".scroll").css("height", result);
}

$(window).resize(function() {
  SetHeight();
});

SetHeight(); // Call once to start off with

【讨论】：

这是一个有趣的开始，我同意它可能不得不依赖 javascript。然而，一个值得注意的问题是它只适用于屏幕加载。如果加载时浏览器大小发生变化，则高度将不再对齐。我目前正在使用角度绑定高度并使用它们的两种方式绑定使其动态工作
在调整浏览器大小时让它更新高度怎么样？我添加到 script.js 文件中，您可以查看一下。
这行得通！我可能不得不进入并将其更改为使用角度指令和手表，而不是仅仅观看浏览器调整大小以更“角度”，但我能够通过这种方式获得所需的结果！谢谢:)
太棒了，很高兴它有帮助！