接受的答案在大多数情况下都有效，但当您的div的高度变化很大时，它就不起作用了——动画的速度不取决于内容的实际高度，而且它看起来会很起伏。

您仍然可以使用CSS执行实际的动画，但您需要使用JavaScript来计算项目的高度，而不是尝试使用auto。不需要jQuery，但如果您想要兼容性，可能需要对其进行一些修改（适用于最新版本的Chrome：）。

window.toggleExpand=函数（元素）{如果（！element.style.height | | element.syle.height=='0px'）｛element.style.height=数组.原型.减少.调用（element.childNodes，函数（p，c）｛return p+（c.offsetHeight ||0）；｝，0）+“px”；}其他{element.style.height=“0px”；}}#菜单#列表{高度：0px；过渡：高度0.3s；背景：#d5d5d5；溢出：隐藏；}<div id=“menu”><input value=“Toggle list”type=“button”onclick=“toggleExpand（document.getElementById（'list'））；”><ul id=“list”><!-- 适用于动态大小的内容。--><li>项目</li><li><div style=“高度：100px；宽度：100px，背景：红色；”></div></li><li>项目</li><li>项目</li><li>项目</li></ul></div>

无硬编码值。

没有JavaScript。

无近似值。

诀窍是使用隐藏和复制的div让浏览器了解100%的含义。

每当您能够复制要设置动画的元素的DOM时，此方法都适用。

.外部{边框：红色虚线1px；位置：相对；}.虚拟{可见性：隐藏；}.真实{位置：绝对；背景：黄色；高度：0；过渡：高度0.5s；溢出：隐藏；}.outer:悬停>.real{高度：100%；}将鼠标悬停在下面的框上：<div class=“outer”><!-- 要设置动画的实际元素--><div class=“real”>不可预测的内容不可预测内容不可预知内容不可预见内容不可预料内容不可预计内容不可预期内容不可预报内容不可预言内容内容不可预测内容不可预知内容</div><!-- 要设置动画的元素的精确副本。--><div class=“dummy”aria hidden=“true”>不可预测的内容不可预测内容不可预知内容不可预见内容不可预料内容不可预计内容不可预期内容不可预报内容不可预言内容内容不可预测内容不可预知内容</div></div>

Jake的最大高度解决方案效果很好，如果硬编码提供的最大高度值不比实际高度大多少（因为否则会出现不期望的延迟和定时问题）。另一方面，如果硬编码值意外为不大于实际高度，元件将不会完全打开。

以下仅限CSS的解决方案还需要硬编码大小应大于大多数实际尺寸。然而，这如果实际大小在某些情况下大于硬编码大小。在这种情况下，转换可能会跳一点，但它永远不会留下部分可见的元素。因此，该解决方案也可用于未知内容，例如数据库，您只需知道内容通常不会更大超过x像素，但也有例外。

想法是使用负值作为边距底部（或边距顶部用于稍微不同的动画），并将内容元素放置到带溢出的中间元素：隐藏。内容的负边距因此减小了中间元件的高度。

以下代码使用边距底部从-150px到0倍。只要内容元素不是高于150px。此外，它使用最大高度上的过渡中间元素从0px到100%。这最终隐藏了中间元素如果内容元素高于150px。对于最大高度，过渡仅用于延迟其应用关闭时一秒钟，而不是为了平滑的视觉效果(因此它可以从0px运行到100%）。

CSS:

.content {
  transition: margin-bottom 1s ease-in;
  margin-bottom: -150px;
}
.outer:hover .middle .content {
  transition: margin-bottom 1s ease-out;
  margin-bottom: 0px
}
.middle {
  overflow: hidden;
  transition: max-height .1s ease 1s;
  max-height: 0px
}
.outer:hover .middle {
  transition: max-height .1s ease 0s;
  max-height: 100%
}

HTML格式：

<div class="outer">
  <div class="middle">
    <div class="content">
      Sample Text
      <br> Sample Text
      <br> Sample Text
      <div style="height:150px">Sample Test of height 150px</div>
      Sample Text
    </div>
  </div>
  Hover Here
</div>

边距底部的值应为负值，并尽可能接近可能达到内容元素的实际高度。如果是绝对的值）越大，则存在与最大高度解决方案，但只要硬编码的大小并不比实际大小大多少。如果绝对值边距底部的值小于变换有点跳跃。在任何情况下，过渡后内容元素被完全显示或完全移除。

有关详细信息，请参阅我的博客文章http://www.taccgl.org/blog/css_transition_display.html#combined_height

我只是为<li>元素设置动画，而不是为整个容器设置动画：

<style>
.menu {
    border: solid;
}
.menu ul li {
    height: 0px;
    transition: height 0.3s;
    overflow: hidden;
}
button:hover ~ .wrapper .menu ul li,
button:focus ~ .wrapper .menu ul li,
.menu:hover ul li {
    height: 20px;
}
</style>


<button>Button</button>
<div class="wrapper">
    <div class="menu">
        <ul>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
        </ul>
    </div>
</div>

您可以添加ul:margin 0；高度为0。

仅限CSS的灵活高度解决方案

我偶然发现了一个使用灵活行为的奇怪解决方案。它至少适用于Chrome和Firefox。

首先，高度转换仅在0和100%之间有效，两个数值。由于“auto”不是数值，因此分数在0和“自动”之间不存在增量。100%是灵活的值，因此不需要特定高度。其次，隐藏内容的外部容器和内部容器都必须设置为display：flex with flex direction：column。第三，外部容器必须具有高度属性。仅当所有内容都包含在外部容器中时，将其设置为0才能保持平滑过渡，因为弯曲行为优先于高度。Edit:Json建议使用height:fit内容，这样容器下面的任何内容都会被向下推。

.外部容器｛高度：0；显示：flex；flex方向：列；｝.内部容器｛display：flex；flex direction:column；｝.隐藏内容｛高度：0；不透明度：0；过渡：高度1s 0.5s进出，不透明度0.5s进出；/*过渡淡出：首先淡出不透明度，然后在延迟等于不透明度持续时间后收缩高度*/}.t触发器：悬停+.内部容器>.隐藏内容｛高度：100%；不透明度：1；过渡：高度1s进出，不透明度0.5s 1s进出；/*过渡：首先展开高度，然后在等于高度持续时间的延迟后淡入不透明度*/}<div class=“outer container”><a href=“#”class=“trigger”>悬停以显示内部容器的隐藏内容</a><div class=“内部容器”><div class=“hidden content”>这是隐藏内容。当由悬停触发时，其高度从0过渡到100%，这会将同一容器中的其他内容逐渐向下推</分区>＜div＞在同一个容器中，当隐藏内容的高度从0过渡到100%时，其他内容会逐渐向下推</分区></div></div>

按“运行代码段”按钮查看正在运行的转换。它只是CSS，没有特定的高度。

我理解这个问题需要一个没有JavaScript的解决方案。但对于那些感兴趣的人来说，这里是我的解决方案，只使用了一点点JS。

好的，因此默认情况下高度将更改的元素的css设置为height:0；打开高度时：自动；。它也有过渡：高度；。但当然，问题是它不会从高度转换到高度：自动；

因此，我所做的是在打开或关闭时将高度设置为元素的scrollHeight属性。这种新的内联样式将具有更高的特异性，并覆盖两种高度：auto；高度：0；并且过渡运行。

打开时，我添加了一个transitioned事件侦听器，它将只运行一次，然后删除内联样式，将其设置为height:auto；这将允许元素在必要时调整大小，就像在这个更复杂的子菜单示例中一样https://codepen.io/ninjabonsai/pen/GzYyVe

关闭时，我会在下一个事件循环循环后立即使用setTimeout删除内联样式，而不会延迟。这意味着高度：自动；被临时覆盖，这允许转换回高度0；

const showHideElement=（元素，打开）=>{element.style.height=element.scrollHeight+“px”；element.classList.tggle（“打开”，打开）；if（打开）{element.addEventListener（'transitionnend'，（）=>{element.style.removeProperty（'height'）；}, {一次：真});}其他{window.setTimeout（（）=>{element.style.removeProperty（'height'）；});}}const menu=document.body.querySelector（“#menu”）；const list=document.body.querySelector（“#menu>ul”）menu.addEventListener（'useenter'，（）=>showHideElement（列表，true））；menu.addEventListener（'useleave'，（）=>showHideElement（list，false））；#菜单>ul{高度：0；溢出：隐藏；背景色：#999；过渡：高度。25s缓和；}#菜单>ul.open{高度：自动；}<div id=“menu”><a>悬停我</a>＜ul＞<li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li></ul></div>