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

本文介绍了扩展可滚动div以匹配另一个div的底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Basically, I have two columns, each with row divs of different height (dynamic content). on the right column, the bottom div has a scrollable set of content. What I want to do is to be able to make the scrollable div have a max-height such that its bottom lines up with the end of the divs in the first column.

我在问题和是我的2个div不是从同一个开始点（由于IE的兼容性问题，我不想使用flexbox）

The biggest difference I see between my question and How do I keep two divs that are side by side the same height? is that my 2 divs do not start at the same point (and I don't want to use flexbox due to compatibility issues with IE)

非常简单的plunkr：

VERY simple 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）

(in the plunkr I want the item1....item6 to line up with the bottom of the red 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的内容。此外，内部内容不响应固定高度。

Things I've tried:1) Setting fixed heights for each div. This doesn't work because I need the height to change with the content for the other divs. In addition, the inner content isn't responding to fixed heights.

2）我不认为我想使用表，因为a）我听说这是非常糟糕的风格b）没关系/真的不应该如果row1和row3是相同的高度

2) I don't think I want to use tables because a) I have heard it is very bad style b) It doesn't matter/really shouldn't be the case that row1 and row3 are the same height

3）Flexbox是一个问题，因为它的工作非常糟糕的百分比填充。左上角的div是一个视频，0高度padding-bottom技巧，使它预先加载空间正常。所以一个选择是找到一个围绕padding-bottom的方法，然后使用flex box。

3) Flexbox is a problem because it works very poorly in tandem with percentages padding. And the top left div is a video with the 0 height padding-bottom trick to make it preload the space properly. So one option would be to find a way around the padding-bottom trick and then use flex box.

4）奇怪的填充：100000px; margin：-1000000px;窍门没有工作，当我尝试它，但我可以只是缺少一个额外的步骤

4) The weird padding: 100000px; margin: -1000000px; trick didn't work when I tried it, however I could simply be missing an additional step

推荐答案

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

I don't think this is possible using only HTML/CSS, because the height of a particular div needs to be dynamically determined that relies on another div that isn't its parent or child.

我可以使用JavaScript解决它：

Therefore I was able to solve it using JavaScript:

这些文件应该实时下载。

Here are the files should Liveweave ever go down.

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

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

这篇关于扩展可滚动div以匹配另一个div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！