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

仅限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，没有特定的高度。

你可以，用一点非语义的小把戏。我通常的方法是设置外部DIV的高度动画，该外部DIV有一个子级，这是一个仅用于测量内容高度的无样式DIV。

函数growDiv（）{var growDiv=文档.getElementById（'grow'）；if（growtDiv.clientHeight）{growtDiv.style.height=0；}其他{var wrapper=document.querySelector（'.measureingWrapper'）；growDiv.style.height=wrapper.clientHeight+“px”；}}#成长{-moz过渡：高度.5s；-ms过渡：高度.5s；-o过渡：高度.5s；-webkit过渡：高度.5s；过渡：高度.5s；高度：0；溢出：隐藏；轮廓：1px纯红色；}<input type=“button”onclick=“growDiv（）”value=“grow”><div id='grow'><div class='measureingWrapper'>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div></div></div>

人们希望能够省去.metringWrapper，只需将DIV的高度设置为auto并设置动画，但这似乎不起作用（设置了高度，但没有动画发生）。

函数growDiv（）{var growDiv=文档.getElementById（'grow'）；if（growtDiv.clientHeight）{growtDiv.style.height=0；}其他{growDiv.style.height=“自动”；}}#成长{-moz过渡：高度.5s；-ms过渡：高度.5s；-o过渡：高度.5s；-webkit过渡：高度.5s；过渡：高度.5s；高度：0；溢出：隐藏；轮廓：1px纯红色；}<input type=“button”onclick=“growDiv（）”value=“grow”><div id='grow'>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div></div>

我的解释是，动画运行需要明确的高度。当高度（起始高度或结束高度）为自动时，无法获得高度动画。

将高度设置为自动并转换最大高度。

在Chrome v17上测试

div {
  position: absolute;
  width:100%;
  bottom:0px;
  left:0px;

  background:#333;
  color: #FFF;

  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.close {
  max-height:0%; /**/
}

具有行高、填充、不透明度和边距的可选CSS解决方案：

正文{背景色：亚麻；}主要的，主要的{背景色：白色；}[id^=“toggle_”]~.content{线条高度：0；不透明度：0；填充：0.5雷姆；过渡：.2s缓和；}[id^=“toggle_”]~.content>p{边距：0；过渡：.2s缓和；}[id^=“toggle_”]：选中~.content{不透明度：1；衬垫：.5rem；线高：1.5；}[id^=“toggle_”]：选中~.content p{边距底部：.75rem；}[id^=“toggle_”]+标签{显示：柔性；调整内容：间距；衬垫：0.5em 1em；背景：灯光转向蓝；边框底部：1px实心灰色；光标：指针；}[id^=“toggle_”]+标签：之前{content:“显示”；}[id^=“toggle_”]：选中+标签：之前{content:“隐藏”；}[id^=“toggle_”]+标签：之后{内容：“\25BC”；}[id^=“toggle_”]：选中+标签：之后{内容：“\25B2”；}<main>＜div＞<input type=“checkbox”id=“toggle_1”隐藏><label for=“toggle_1”hidden></label><div class=“content”><p>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Duis dolor neque，准将leo ut，拍卖人tincidunt mauris。Nunc frigilla tincidunt metus，非孕妇lorem调味品非。Duis ornare purus nisl，位于埃格特拱门。整数lorem ante，porta vulputate dui ut，blandit tempor tellus。Proin facilisis bibendum直径，位于调味品中。Donec volutpat dui eu mollis vulputate。Nunc commodo lobortis Nunc at ultrices。吊耳中的吊耳直径。</p></div></div>＜div＞<input type=“checkbox”id=“toggle_2”隐藏><label for=“toggle_2”hidden></label><div class=“content”><p>我不能坐在拍卖行旁边。Vivamus sed nisi vite nibh调味品pulvinar eu vel lorem。生命的前阶段是一个非常容易的阶段。在外的大型流苏。做一个临时自由人。Donec sapien libero，lacinia sed aliquet ut，imperite finibus tellus。努克·泰勒斯·莱图斯，波苏雷侯爵的朗库斯，坦普斯坐在埃尼姆。Morbi等人使用了一种边缘数字丝绒。Donec commodo，est id accumsan cursus，diam dui hendrerit nisi，vel hendreritpurus dolor ut risus。Phasellus mattis egestas ipsum sed ullamcorper。在直径舌中，rhoncus vel enim et，impredite porta justo。Curabitur vulputate hendrerit nisl，et ultricies diam.Maecenas ac leo a diam cursus ornare nec eu quam。</p><p>Sed非vulputate purus，Sed consectetur odio。Sed non-nih frigilla，impressive odio nec，efficitur ex.Suspendiss ut dignissim enim。迈塞纳斯·费利斯·奥古斯特（Maecenas felis augus），坐在埃米特·塞姆·费利利亚（sem frigilla）上，坐在艾姆桑·费利利亚的笔尖上。Quisque posuere lacus tortor，ques malesuada magna elementum a.Nullam id purus in pre terstie tincidunt。Morbi luctus orci eu egestas dignissim。Sed tincidunt，libero quis scelerisque bibendum，ligula nisi gravida libero，id lacinia nulla leo in elit。</p><p>Aenean aliquam risus id consectetur sagitis。Aliquam Aliquam nisl eu预示着诅咒，意味着最大的痛苦。Aliquam ipsum dolor，tempor et justo ac，fermentum mattis dui。伊蒂安在波苏雷舌。Vestibulum tortor metus，viverra vitae mi non，laoret iaculis purus。Praesent vel semper笔尖。Curabitur一只刚果拉库斯。在et pellentesque lorem。Morbi posuere猫科动物，无直径壳核，无壳核。Vivamus ultricies、massa id sagitis consequat、sem mauris tincidunt nunc、eu vehicula augus quam ut mauris。</p></div></div>＜div＞<input type=“checkbox”id=“toggle_3”hidden><label for=“toggle_3”hidden></label><div class=“content”><p>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Duis dolor neque，准将leo ut，拍卖人tincidunt mauris。Nunc frigilla tincidunt metus，非孕妇lorem调味品非。Duis ornare purus nisl，位于埃格特拱门。整数lorem ante，porta vulputate dui ut，blandit tempor tellus。Proin facilisis bibendum直径，位于调味品中。Donec volutpat dui eu mollis vulputate。Nunc commodo lobortis Nunc at ultrices。吊耳中的吊耳直径。</p><p>Sed非vulputate purus，Sed consectetur odio。Sed non-nih frigilla，impressive odio nec，efficitur ex.Suspendiss ut dignissim enim。迈塞纳斯·费利斯·奥古斯特（Maecenas felis augus），坐在埃米特·塞姆·费利利亚（sem frigilla）上，坐在艾姆桑·费利利亚的笔尖上。Quisque posuere lacus tortor，ques malesuada magna elementum a.Nullam id purus in pre terstie tincidunt。Morbi luctus orci eu egestas dignissim。Sed tincidunt，libero quis scelerisque bibendum，ligula nisi gravida libero，id lacinia nulla leo in elit。</p></div></div></main>

杰克对最大高度动画化的回答很好，但我发现设置大的最大高度所导致的延迟很烦人。

可以将可折叠内容移动到内部div中，并通过获取内部div的高度来计算最大高度（通过JQuery，它将是outerHeight（））。

$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});

这里有一个jsfiddle链接：http://jsfiddle.net/pbatey/duZpT

这里有一个jsfiddle，它提供了所需的绝对最小代码量：http://jsfiddle.net/8ncjjxh8/