可变高度的 CSS 计算

Question

我有两个叠在一起的 div。顶部 div 包含一个手风琴菜单，完全展开时高度为 300 像素。 bottom div 的 CSS 是：

高度：计算（100vh - 300px）

当顶部 div 中的手风琴完全展开时，这非常有用 - 底部 div 填充了视口的其余垂直空间。

当顶部 div 中的手风琴折叠时就会出现问题。现在顶部 div 只有 50px 高，但底部 div 的 CSS 仍然从 100vh 中减去 300px。

是否可以从 100vh 中减去的值是一个变量而不是固定值？因此，它不是硬编码的像素量，而是减去顶部 div 的高度。

Answer 1

如果您的标记以某种方式构建，您可以使用同级选择器来硬编码新值。

在下面的代码中，扩展手风琴的同级选择器用于定位并使用新的 div 覆盖其下方 div 的默认计算高度

我尝试用这个小提琴来解释它：https://jsfiddle.net/L4ae0rq6/

HTML

<div class="accordion collapsed"></div>
<div class="calc"></div>
<hr/>
<div class="accordion expanded"></div>
<div class="calc"></div>

CSS

.accordion.collapsed {
    height: 50px;
    width: 200px;
    background: grey;
}

.accordion.expanded {
    height: 100px;
    width: 200px;
    background: grey;
}

.accordion.expanded + .calc {
    height: calc(100vh - 300px);
}

.calc {
    width: 200px;
    height: calc(100vh - 200px);
    background: lightgrey;
}

希望这有帮助。

Answer 2

您可以使用弹性。

检查以下内容：

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.expandable {
  background: red;
  min-height: 40px;
}
.expandable.expanded {
  flex-basis: 300px;
}
.filler {
  background: green;
  flex-grow: 1;
}

因此，当添加

.expanded

类时，它需要

300

像素的空间，否则至少需要

40

像素的空间。

无论如何，只要您使用

.filler

，

flex-grow: 1

就会占用剩余空间。

演示