Question

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

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

这是一个代表我的布局的小提琴：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。内容的位置为：absolute，left，top，right和bottom设置为0。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果没有javascript，这是不可能的。您可以通过将子父级设置为固定高度（不是100％）并为橙色div提供至少与填充其余部分所需的最小高度相同的长度来滚动整个右侧部分。在所有情况下的空间。

但是没有Javascript，就没有办法告诉橙色div只是填补剩下的空间。

Answer 3

首先我发布建议这是不可能的。然后我想起所有网站过去是如何与表格一起布局的。我认为你不得不采用那些旧方法来解决这个问题。如果您的子父级是单个列表，您的第一个子子项是thead而第二个子项是tbody，您可以使用此答案中使用的相同技巧：https://stackoverflow.com/a/17585032/4992551

可滚动的div来填充父级的剩余高度

3 个答案: