html - 上面DIV动态改变高度时DIV填充剩余高度

Question

当上面的 DIV (D1) 动态改变其大小时，是否有一个 CSS 解决方案可以让一个 DIV (D2) 填充剩余的父元素高度？

|-------------------|    |-------------------|    |-------------------|
| some content   D1 |    | some content   D1 |    | some content   D1 |
| +                 |    | more content      |    | more content      |
|-------------------|    | +                 |    | even more         |
|                D2 |    |-------------------|    | +                 |
|                   |    |                D2 |    |-------------------|
|                   |    |                   |    |                D2 |
|                   |    |                   |    |                   |
|                   |    |                   |    |                   |
|                   |    |                   |    |                   |
|-------------------|    |-------------------|    |-------------------|

D1 还有一个 max-height 和 overflow: scroll。

在此jsFiddle让黄色 (d2) 填充其余部分，无论 d1 的动态内容是什么，而不使用 javascript。

我看过几个问题，但没有一个处理上部 DIV (D1) 的动态高度变化

• > Div to fill remaing vertical space
• > How to make a div height to fill available space
• > Expand DIV vertically to fill the remaining space in nonfixed height column
• > How to fill 100% of remaining height?
• …

我无法使用 Javascript 解决方案。 TABLE 也可以代替 DIV。

Answer 1

检查下面的更新答案。

构造成这样

 div class=main  {
     div class=d1 {
          something 
          more stuff
          even more stuff
          }
     div class=d2{
            something
           }

}

样式:

div main { 
      width 200 px; for example
      }
d1, d2 { 
      width 100%,
      and float:left
      }

现在通过这样做，当 d1 更改时 d2 自动下降，不要给任何 DIV height

更新:使用 Flexbox 属性

.main {
  width: 500px;
  height: 160px;
  background: grey;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
}
.d1 {
  background: lime;
}
.d2 {
  background: yellow;
  height: 100%;
}
.d1,
.d2 {
  width: 100%;
}

<div class="main">
  <div class="d1">
    d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1 d1
  </div>
  <div class="d2">
    d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2 d2
  </div>
</div>

现在 D1 中有多少内容并不重要，D2 将占据 main div 的整个高度。