css - 让 DIV 影响其先前的元素高度？

Question

我目前有类似以下内容:

基本上它只是三个 div 包含在一个指定了宽度和高度的 container_div 中。容器和顶部 div 的 CSS 代码如下所示:

.container_div{
    width: 800px;
    height: 500px;
}

.top_div{
    width:100%;
    height:100px;
}

我现在要做的是为 center_div 和 bottom_div 元素编写 CSS 代码，其方式如下:

• 底部div没有溢出
• 底部 div 可以增长/收缩而不导致其父元素改变其大小(类似于 bottom:0 绝对定位)
• 每当底部 div 增长时，中心 div 就会收缩，反之亦然。

这是底部 div 增长时应该发生的情况:

我正在寻找纯 CSS 解决方案。 Firefox 支持就足够了。

Answer 1

这可以通过 css 表格布局轻松实现。在您的情况下，涉及表格行，这将(默认情况下)自动填充其 display: table 容器的空间。

在您的情况下，只需设置:

• 顶部div要固定高度
• 中间的 div 高度为 100%。这会将底部的 div 压缩到它自己的内容高度。
• 底部 div 高度为零。

body { margin: 0; }

#container {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  color: white;
}

#container > div:nth-child(1) {
  display: table-row;
  height: 50px;
  background: red;
}

#container > div:nth-child(2) {
  display: table-row;
  height: 100%;
  background: green;
}

#container > div:nth-child(3) {
  display: table-row;
  height: 0;
  background: blue;
}

<div id="container">
  <div>div 1 (fixed 100px)</div>
  <div>div 2 (expand to fill remaining space) </div>
  <div>
      div 3 (fit its own content)
      loren ipsum dolor sit amet... loren ipsum dolor sit amet... loren ipsum dolor sit amet... loren ipsum dolor sit amet...
  </div>
</div>