extend scrollable div to match bottom of another div

Question

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.

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)

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>

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

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) 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 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) The weird padding: 100000px; margin: -1000000px; trick didn't work when I tried it, however I could simply be missing an additional step

Tundra Fizz · Accepted Answer · 2016-09-08T18:01:59.183

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.

Therefore I was able to solve it using JavaScript:

http://liveweave.com/3014aD

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

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

This is an interesting start, and I agree that it will probably have to rely on javascript. However, a notable problem with this is that it only works on screen load. If the browser size changes while loaded the heights wont line up anymore. I'm currently working on binding the heights with angular and using their two way binding to make it dynamically work — pasquers, Sep 08 '16 at 17:53
How about having it update the height whenever the browser is resized? I added to the script.js file so you can take a look at that. — Tundra Fizz, Sep 08 '16 at 18:02
This works! I may have to go in and change it to be using angular directives and watches instead of just watching the browser resize to be more 'angular', but I was able to get the desired result this way! Thanks :) — pasquers, Sep 08 '16 at 21:41

extend scrollable div to match bottom of another div

1 Answers1

Linked