Div-content可见div-height = 0

Question

我在div里面做了一个ul。当我设置div {height：0;}时，我预计ul会消失，但列表仍然可见。

overflow：hidden使列表不可见，但似乎它仍然对div的高度产生影响。

display：none有效，但列表应该有过渡效果。这就是为什么我要将高度设置为0。

我如何使列表消失并回归过渡？

html,
body {
  background-color: gray
}

.toggle {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 5vh;
  background-color: #ff7f7f;
}

.toggle ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  width: 35vw;
  height: 6vh;
  margin-bottom: 5px;
  border: 2px solid #ffffff;
  border-radius: 0px;
  font-size: 3vh;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.5s;
}

<div class="toggle">

  <ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
    <li>DDD</li>
  </ul>
  <ul>
    <li>EEE</li>
    <li>FFF</li>
    <li>GGG</li>
    <li>HHH</li>
  </ul>

</div>

isolated problem

full problem

image of full problem它应该看起来像使用display：none，因为overflov：hidden仍然会对布局产生影响。

Answer 1

在你的完整例子中，你在margin-top: 5vh;类上有.toggle。

元素的高度按预期为0，但您为元素指定的边距当然仍然受到尊重。