您可以从height:0转换到height:auto，前提是您还可以提供最小高度和最大高度。

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}

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

在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%; /**/
}

此解决方案使用了一些技术：

填充底部：100%“hack”，其中百分比是根据元素的当前宽度定义的。有关此技术的更多信息。浮动收缩包装，（需要额外的div来应用浮动清除黑客）非语义使用https://caniuse.com/#feat=css-编写模式和一些转换来撤销它（这允许在垂直上下文中使用上面的填充黑客）

结果是，我们只使用CSS实现了高性能的转换，并使用一个转换函数来平滑地实现转换；圣杯！

当然，这也有缺点！我无法确定如何控制内容被截断的宽度（溢出：隐藏）；由于衬垫底部的裂缝，宽度和高度密切相关。不过，也许有办法，所以我们会回到过去。

https://jsfiddle.net/EoghanM/n1rp3zb4/28/

正文{填充：1em；}.触发器{字号：粗体；}/*.扩展器仅用于浮动清除*/.扩展器：：之后{内容：“”；显示：表格；清晰：两者都有；}.外部{float：左；/*目的：收缩以适应内容*/边框：1px实心绿色；溢出：隐藏；}.内部{过渡：填充底部0.3s，方便进出；/*或者你能想出的任何疯狂的转换函数*/底部填充：0%；/*填充百分比是根据宽度定义的。此级别的宽度等于内容的高度*/高度：0；/*不幸的是，书写模式的改变还有其他的不良影响，比如光标的方向*/写入模式：垂直rl；光标：默认值；/*不需要垂直文本（横向工字梁）*/变换：旋转（-90度）平移X（-100%）；/*撤消写入模式*/变换原点：0 0；边距：0；/*此处的左/右边距将增加高度*/}.inter>div｛white-space:nowrap；｝.extender:hover.intern，/*在展开时保持打开*/.t触发器：悬停+扩展器.内部{填充底部：100%；}<div class=“trigger”>HoverMe</div><div class=“扩展器”><div class=“outer”><div class=“inner”><div>第一项</div><div>内容</div><div>内容</div><div>内容</div>＜div＞长内容不能宽于外部高度，不幸的是＜/div＞<div>最后一项</div></div></div></div>＜div＞在内容之后</div></div>

具有行高、填充、不透明度和边距的可选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/

根据MDN Web Docs，CSS转换规范中故意排除了auto值，因此在网格和柔性布局中使用height:100%、top或flex属性，而不是height:auto。

展开/折叠覆盖

.grid容器{显示：栅格；位置：绝对；}.内容{背景：浅绿色；高度：0；溢出：隐藏；过渡：1s；}span:hover+.gridcontainer.content{高度：100%；}<span>悬停在我上方</span><div class=“grid container”><div class=“content”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</分区></div><p>其余页面内容</p＞

展开/折叠滑动覆盖

.grid容器{显示：栅格；位置：绝对；溢出：隐藏；指针事件：无；/*以实现与容器下方元素的交互*/}.内容{背景：浅绿色；指针事件：自动；位置：相对；顶部：-100%；过渡：1s；}span:hover+.gridcontainer.content{顶部：0；}<span>悬停在我上方</span><div class=“grid container”><div class=“content”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</分区></div><p>其余页面内容</p＞

在文档流中展开/折叠

html格式{显示：栅格；}正文{显示：柔性；弯曲方向：柱；}.内容{背景：浅绿色；弹性基础：0；溢出：隐藏；过渡：1s；}span：悬停+内容{挠曲：1；}<span>悬停在我上方</span><div class=“content”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</分区><p>其余页面内容</p＞