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

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

我意识到这条线索已经过时了，但它在某些谷歌搜索中排名靠前，所以我认为它值得更新。

还可以只获取/设置元素自身的高度：

var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';

您应该在内联脚本标记中的target_box结束标记之后立即转储此Javascript。

您应该改用scaleY。

上一页{背景色：#eee；变换：缩放Y（0）；变换原点：顶部；转变：转变0.26s；}p： 悬停~ul{变换：缩放Y（1）；}<p>将此悬停</p>＜ul＞<li>咖啡</li><li>茶</li><li>牛奶</li></ul>

我在jsfiddle上制作了上述代码的供应商前缀版本，并将jsfiddl更改为使用scaleY而不是height。

编辑有些人不喜欢scaleY如何转换内容。如果这是一个问题，那么我建议使用剪辑。

上一页{剪辑：矩形（自动，自动，0，自动）；位置：绝对；边距：-1rem 0；衬垫：.5rem；颜色：白色；背景色：rgba（0、0、0和0.8）；过渡特性：剪辑；过渡时间：0.5s；过渡时间函数：立方贝塞尔（0.175、0.885、0.32、1.275）；}h3:悬停~ul，h3：活性~ul，ul：悬停{剪辑：矩形（自动，自动，10rem，自动）；}<h3>悬停在此处</h3>＜ul＞<li>此列表</li><li>被剪裁</li><li>剪辑过渡</li><li>将显示它</li></ul><p>一些文本。。。</p>

根据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＞

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

一句话解决方案：使用填充过渡。这对于大多数情况（如手风琴）来说已经足够了，甚至更好，因为填充值通常不大，所以速度很快。

如果希望动画过程更好，只需提高填充值即可。

parent｛border top:#999 1px solid；｝h1｛margin:.5rem；字体大小：1.3rem｝.儿童{高度：0；溢出：隐藏；背景色：#dedede；过渡：填充。2s易进易出，不透明度。2s容易进易出；填充：0.5雷姆；不透明度：0；}.childre:：之前，.childres:：之后｛content:“”；显示：块；｝.children：：在｛margin-top:-2rem；｝之前.children：：在｛margin-bottom:-2rem；｝之后.父级：悬停.子级{高度：自动；不透明度：1；衬垫：2.5雷姆。5雷姆；/*0.5+abs（-2），确保低于预期最小高度*/}<div class=“parent”><h1>将我悬停</h1><div class=“children”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div><div class=“parent”><h1>将我悬停（长内容）</h1><div class=“children”>一些内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br></div></div><div class=“parent”><h1>悬停我（简短内容）</h1><div class=“children”>一些内容<br>一些内容<br>一些内容<br></div></div>