html - 可滚动的 div 以填充父级的剩余高度

Question

我需要以某种方式创建一个 div 以某种方式可滚动 并填充其父级的剩余空间(父级有固定高度，其他一切都是动态的)。

问题是高度是动态的(主父除外)，它应该与 IE 兼容(至少 7 或 8)并且我不能使用 Javascript
有没有人知道这是如何实现的？

这是代表我的布局的 fiddle :https://jsfiddle.net/dsyh8xtv/16/

*我需要橙色 div 来填充剩余高度并可滚动

.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>

Answer 1

试试这个。它使用 display:table 和 table-row。内容的position:absolute位置，左、上、右和下设置为 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>