如何在没有最大高度但使用纯CSS的情况下将高度0转换为自动

Question

这可能是你们很多人都遇到过的问题，并且由于某种原因，修复方法并不容易找到。

但是有一个解决办法！ 请允许我展示：

首先，您需要使用以下 css 创建一个网格元素：

<div class="grid-element">
</div>

<style>
.grid-element {
  display: grid;
  grid-template-rows: 0fr;
  transition-property: grid-template-rows;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}
</style>

现在在网格元素内添加内容包装器：

<div class="grid-element">
  <div class="content-wrapper">
    <!-- here comes your content to slide down -->
  </div>
</div>

<style>
.grid-element {
  display: grid;
  grid-template-rows: 0fr;
  transition-property: grid-template-rows;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}

.content-wrapper {
 overflow: hidden;
}
</style>

现在内容仍将被隐藏，以允许幻灯片工作，您必须使用以下 css 添加条件类

slidedown-active

grid-template-rows: 1fr;

在此示例中，我使用按钮添加和删除类，但您可以以任何方式应用此幻灯片，并将任何内容放入您想要幻灯片的内容包装器中。

<button onclick="toggleSlidedown()">toggle slidedown</button>

<div class="grid-element">
  <div class="content-wrapper">
    <!-- here comes your content to slide down -->
    <p>hello world!</p>
  </div>
</div>

<style>
.grid-element {
  display: grid;
  grid-template-rows: 0fr;
  transition-property: grid-template-rows;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}

.content-wrapper {
 overflow: hidden;
 background-color: red;
}

.slidedown-active {
  grid-template-rows: 1fr;
}
</style>

<script lang="js">
function toggleSlidedown() {
  const element = document.querySelector(".grid-element");

  if (element.classList.contains('slidedown-active')) {
    element.classList.remove("slidedown-active");
  } else {
    element.classList.add("slidedown-active");
  }
}
</script>

Answer 1

解决方案是网格！

<button onclick="toggleSlidedown()">toggle slidedown</button>

<div class="grid-element">
  <div class="content-wrapper">
    <!-- here comes your content to slide down -->
    <p>hello world!</p>
  </div>
</div>

<style>
.grid-element {
  display: grid;
  grid-template-rows: 0fr;
  transition-property: grid-template-rows;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}

.content-wrapper {
 overflow: hidden;
 background-color: red;
}

.slidedown-active {
  grid-template-rows: 1fr;
}
</style>

<script lang="js">
function toggleSlidedown() {
  const element = document.querySelector(".grid-element");

  if (element.classList.contains('slidedown-active')) {
    element.classList.remove("slidedown-active");
  } else {
    element.classList.add("slidedown-active");
  }
}
</script>