Question

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

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

我无法使用Javascript解决方案。表也很好而不是DIV。

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将占据main div的全高。

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/

当DIV上方动态改变其高度时，DIV填充剩余高度

2 个答案:

更新：使用Flexbox属性