CSS方式根据另一个div调整div的高度

Question

我有一个包含灵活区域,弹出区域和页脚的div.

• 灵活的区域和页脚始终存在.

• 弹出区域为0,40px或60px,因为其内容是使用js动态更改的.

• 灵活区域应填充页脚上方的所有空间.

是否有一种仅限css的方法允许灵活区域根据弹出窗口的大小增加/减少其高度？

使用当前的css,当我删除jsfiddle中的弹出窗口时,灵活性不会扩展以填充该区域.

我试图看看我是否可以在没有jquery或flexbox的情况下做到这一点,以获得最大的兼容性.

感谢您的建议/意见!

https://jsfiddle.net/L8me7fLk/

div {
  color: #ffffff;
}
#container {
  height: 100vh;
  width: 100vw;
}
#flexible {
  background-color: red;
  width: 100vw;
  min-height: 68vh;
  max-height: 80vh;
}
#popup {
  width: 90%;
  max-height: 60px;
  min-height: 40px;
  line-height: 20px;
  overflow-y: scroll;
  position: absolute;
  bottom: 0;
  margin-bottom: 50px;
  background-color: #cccccc;
}
#footer {
  width: 90%;
  height: 50px;
  background-color: #666666;
  position: absolute;
  bottom: 0;
}

<div id="container">
  <div id="flexible">
    1content
    <br/>2content
    <br/>3content
    <br/>
  </div>
  <div id="popup">
    1popup
    <br/>2popup
    <br/>3popup
    <br/>4popup
    <br/>5popup
    <br/>
  </div>
  <div id="footer">
    footer
  </div>
</div>

Answer 1

使用flexbox可以实现所需的结果.

首先,<br/>从代码中消除s 是个好主意.您可以将这些项目放在<div>s中.

...
<div>1content</div>
<div>2content</div>
<div>3content</div>
...

在容器上,您可以使用flexbox告诉它表现为列:

#container {
  display: flex;
  flex-flow: column wrap;
}

这同样需要的,因为版面的内容为孩子,flexible,popup,和footer是列.

现在最重要的部分.flexbilediv应该占用可用空间,而它下面的div不应该占用.因此,我们可以应用以下内容:

#flexible {
  display: flex;
  flex: 1 0 auto;
}

#popup {
  display: flex;
  flex: 0 1 auto;
}

这告诉flexible我们使用可用空间,而popup不是.有关flex选择器如何工作的更多信息,请参阅https://developer.mozilla.org/en/docs/Web/CSS/flex

JS小提琴的例子