div-content 可见thought div-height = 0答案

【问题标题】：Div-content visible althought div-height = 0div-content 可见thought div-height = 0
【发布时间】：2018-09-04 20:11:40
【问题描述】：

我在 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 仍然对布局有影响。

【问题讨论】：

您必须使用overflow:hidden 才能使用height:0px 工作
列表是不可见的，但似乎仍然有高度，这对布局有明显的影响@BhargavChudasama 你可以看看“完整问题”链接吗？
您在完整示例中的 .toggle 类中有 margin-top: 5vh; ... 元素的高度 is 0 如预期的那样，但您为元素指定的边距当然是仍然受到尊重。
就是这样。谢谢@misorude！！

标签： html css height

【解决方案1】：

在您的完整示例中，.toggle 类中有 margin-top: 5vh;。

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

【讨论】：