1

I need to somehow create a div that somehow is scrollable and fills the remaining space of it's parent (parent has a fixed height, everything else is dynamic).

The problem is that the heights are dynamic (except for the main parent), it should be compatible with IE (at least 7 or 8) and I can't use Javascript
Does anyone have even the slightest idea how is this achievable ?

Here's a fiddle that represents my layout: https://jsfiddle.net/dsyh8xtv/16/

*I need the orange div to fill the remaining height and be scrollable

.parent {
  display: table;
  height: calc(100vh - 50px);
  background-color: white;
  border: 1px solid #eee;
}

.child {
  display: table-cell;
  height: 100%;
}

.child:nth-child(1) {
  background-color: blue;
  color: #fff;
}

.child:nth-child(2) {
  background-color: yellow;
}

.sub-parent {
  display: block;
  background-color: pink;
  height: 100%;
}

.sub-child {
  width: 100%;
  float: left
}

.sub-child:nth-child(1) {
  background-color: red;
  color: #fff;
}

.sub-child:nth-child(2) {
  background-color: orange;
  overflow-y: scroll;
}
<div class="parent">
  <div class="child">
    regular child
  </div>
  <div class="child">
    <div class="sub-parent">
      <div class="sub-child">
        this one has a dynamic height
      </div>
      <div class="sub-child">
        this one should fill the remaining height and be scrollable
      </div>
    </div>
  </div>
</div>
Dennis Novac
  • 1,003
  • 10
  • 23

3 Answers3

1

Try this. It uses display:table and table-row. The content has position:absolute with left, top, right, and bottom set to 0.

https://jsfiddle.net/dsyh8xtv/22/

.parent {
  display: table;
  height: calc(100vh - 200px);
  background-color: white;
  border: 1px solid #eee;
}

.child {
  display: table-cell;
  height: 100%;
}

.child:nth-child(1) {
  background-color: blue;
  color: #fff;
}

.child:nth-child(2) {
  background-color: yellow;
}

.sub-parent {
  display: block;
  background-color: pink;
  height: 100%;
  display:table;
}

.sub-child {
  width: 100%;
  display:table-row;
}

.sub-child:nth-child(1) {
  background-color: red;
  color: #fff;
}

.sub-child:nth-child(2) {
  background-color: orange;
  height:100%;
}

.content-wrapper {
  width:100%;
  height:100%;
  position:relative;
}

.content {
  overflow-y:auto;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
}
<div class="parent">
  <div class="child">
    regular child
  </div>
  <div class="child">
    <div class="sub-parent">
      <div class="sub-child">
        this one has a dynamic height
        <br/>
        this one has a dynamic height
      </div>
      <div class="sub-child">
        <div class="content-wrapper">
          <div class="content">
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
koga73
  • 964
  • 9
  • 16
0

This won't be possible without javascript. You could have the entire right section be scrollable by setting the the sub-parent to a fixed height (not 100%) and giving the orange div a min-height that is at least as big as it needs to be to fill the rest of the space in all circumstances.

But without Javascript there's no way to tell the orange div to just fill the rest of the space.

dave
  • 2,762
  • 1
  • 16
  • 32
0

First I posted suggesting this was impossible. Then I remembered how all websites used to be layed-out with tables. I think you'll have to resort to those old methods to pull this off. If your sub-parent was a single column table, your first sub child was a thead and the second was a tbody, you could pull off the same trick used in this answer: https://stackoverflow.com/a/17585032/4992551

Community
  • 1
  • 1
dave
  • 2,762
  • 1
  • 16
  • 32
  • That would still require a fixed height for the *tbody*, or did I understand it wrong ? – Dennis Novac Dec 16 '16 at 20:04
  • Yah, you're right actually. I think my first answer saying this was impossible without javascript might indeed be correct. There might be a really hacky solution possible where you set it to a fixed height that covers or exceeds the height of the area available with all possible heights of the top element, and then set overflow hidden on the parent, but then you have content that may never be visible. – dave Dec 16 '16 at 20:12