Div-内容可见思想div-高度=0

Question

我在 div 中创建了一个 ul。当我设置 div {height: 0;} 时，我预计 ul 会消失，但列表仍然可见。

overflow:hidden 使列表不可见，但似乎对 div 的高度仍有影响。

diaplay: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

您的完整示例中 .toggle class 上有 margin-top: 5vh;。

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

Div-内容可见思想div-高度=0

Div-content visible althought div-height = 0

html

css

height