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

Question

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

|-------------------|    |-------------------|    |-------------------|
| 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 填充剩余的垂直空间
• 如何使 div 高度以填充可用空间
• 垂直展开 DIV 以填充非固定高度列中的剩余空间
• 如何填充 100% 的剩余高度？
• …</li>

我不能使用 Javascript 解决方案。TABLEs 也可以代替 DIVs。

Answer 1

检查下面的更新答案。

做这样的结构

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

}

CSS：

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

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

更新：使用 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将占据maindiv 的全部高度。

Answer 2

我更喜欢描述性更强的类名......

.container {
    display: flex;
    flex-direction: column;
    font: 20px Verdana;
    height: 88vh;
    background: grey;
    padding: 5px;
}
.upper{
    flex: 1 1; /* grow shrink */
    background: lime;
}
.lower{
    flex: 1 1; /* grow shrink */
    background: yellow;
    overflow-y: auto;
}

https://jsfiddle.net/spencerw/zLcwq42s/52/