Question

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

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

Answer 1

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

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

Answer 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 的类为“three”，浏览器将分配视口可用高度的三分之一。 100vh 不是一个绝对的度量，唯一的绝对值是您以像素为单位的值（尽管如果浏览器认为您的元素响应速度不够快，有时甚至会改变）。

创建一个可折叠的 div

2 个答案: