创建一个可折叠的 div答案

【问题标题】：Create a collapsible divs创建一个可折叠的 div
【发布时间】：2021-03-02 12:52:50
【问题描述】：

我正在尝试创建一个可折叠的 div（排列在一列中），它在打开时始终具有相同的高度。例如，如果打开一个 div，它会占用 100% 的高度。如果两个是开放的，每个占 50% 等等。我在每个 div 上设置了 flex-grow: 1，但内容较大的总是比其他的高。我也尝试设置 fles-basis: 0，但它们根本不打开。

这是我的最小示例的链接：https://codesandbox.io/s/nifty-meadow-hyr31

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

在您的 Collapsible.module.css 中添加 height=100vh 以打开样式：

.open {
  overflow: auto;
  height: 100vh;
}

【讨论】：

我看到该解决方案有效，但您能否详细说明它的工作原理？为什么高度等于 100vh 的 div 在 2 个元素的情况下占用 50% 的高度，在 3 个的情况下占用 33% 的高度等等，而不是我们设置的实际 100vh？
我举了一个例子，希望对你有帮助。我参加了一个谷歌会议，还有更多内容，但总而言之，最好使用 vh 表示高度并坚持使用百分比表示宽度，因为百分比对于高度的表现可能很奇怪，同样 vw 在某些极少数情况下可能是不可预测的。

【解决方案2】：

为了解释为什么上面的解决方案有效，一个 vh 等于视口的 1%，浏览器总是以像素为单位计算值，看一个简单的例子：

one = document.querySelector('.one');
two = document.querySelector('.two');
one.innerText = one.clientHeight;
two.innerText = two.clientHeight;

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
div {
    height: 100vh;
}
.one {
    background-color: chocolate;
}
.two {
    background-color: cyan;
}
.three {
    background-color: darkgray;
}

<div class="one">one</div>
<div class="two">two</div>

如果您添加第三个 div 类为“三”，浏览器将为每个 div 分配视口可用高度的三分之一。 100vh 不是一个绝对的度量，唯一的绝对值是以像素为单位的值（尽管如果浏览器认为您的元素没有足够的响应性，即使这样有时也会改变）。

【讨论】：