Question

我有两个div叠在一起。顶部div包含一个折叠式菜单，完全展开后高度为300px。底部 div的CSS是：

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

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

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

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

Answer 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;
}

希望这有帮助。

Answer 2

您可以使用flex。

检查以下内容：

.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就会占用剩余空间。

Demo

具有可变高度的CSS calc

2 个答案: