具有可变高度的 CSS calc答案

【问题标题】：CSS calc with variable height具有可变高度的 CSS calc
【发布时间】：2017-03-11 16:06:06
【问题描述】：

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

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

当顶部 div 中的手风琴完全展开时效果很好 - 底部 div 填充了视口的其余垂直空间。

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

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

【问题讨论】：

不，这是不可能的。但是手风琴本身可能不会神奇地完全崩溃，但其中涉及到一些 JavaScript。因此，当脚本使手风琴折叠时，您还可以使其在底部 div 上设置一个类，应用不同的高度值。
是的，我认为需要涉及一些 js，但不想忽视 CSS 解决方案。感谢您的回复。

标签： css variables viewport-units

【解决方案1】：

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

在下面的代码中，展开手风琴的同级选择器用于定位并覆盖其下方 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;
}

希望这会有所帮助。

【讨论】：

【解决方案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 像素。

在任何情况下，只要您使用flex-grow: 1，.filler 就会占用剩余空间。

Demo

【讨论】：