无硬编码值。

没有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>

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

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

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

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

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>

下面是我刚刚与jQuery结合使用的解决方案。这适用于以下HTML结构：

<nav id="main-nav">
    <ul>
        <li>
            <a class="main-link" href="yourlink.html">Link</a>
            <ul>
                <li><a href="yourlink.html">Sub Link</a></li>
            </ul>
        </li>
    </ul>
</nav>

以及功能：

    $('#main-nav li ul').each(function(){
        $me = $(this);

        //Count the number of li elements in this UL
        var liCount = $me.find('li').size(),
        //Multiply the liCount by the height + the margin on each li
            ulHeight = liCount * 28;

        //Store height in the data-height attribute in the UL
        $me.attr("data-height", ulHeight);
    });

然后，您可以使用click函数使用css（）设置和删除高度

$('#main-nav li a.main-link').click(function(){
    //Collapse all submenus back to 0
    $('#main-nav li ul').removeAttr('style');

    $(this).parent().addClass('current');

    //Set height on current submenu to it's height
    var $currentUl = $('li.current ul'),
        currentUlHeight = $currentUl.attr('data-height');
})

CSS:

#main-nav li ul { 
    height: 0;
    position: relative;
    overflow: hidden;
    opacity: 0; 
    filter: alpha(opacity=0); 
    -ms-filter: "alpha(opacity=0)";
    -khtml-opacity: 0; 
    -moz-opacity: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

#main-nav li.current ul {
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1.0; 
    -moz-opacity: 1.0;
}

.ie #main-nav li.current ul { height: auto !important }

#main-nav li { height: 25px; display: block; margin-bottom: 3px }

在过渡中使用最大高度，而不是高度。并将最大高度的值设置为比您的长方体所能获得的值更大的值。

请参阅Chris Jordan提供的JSFiddle演示。

#菜单#列表{最大高度：0；过渡：最大高度0.15s缓和；溢出：隐藏；背景：#d5d5d5；}#菜单：悬停#列表{最大高度：500px；过渡：最大高度0.25s；}<div id=“menu”><a>悬停我</a><ul id=“list”><!-- 创建一组，或不创建一组li来查看时间。--><li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li></ul></div>

这并不是问题的“解决方案”，而是一种变通方法。它只在用文本编写时有效，但可以根据需要更改为使用其他元素。

.originalContent {
    font-size:0px;
    transition:font-size .2s ease-in-out;
}
.show { /* class to add to content */
    font-size:14px;
}

下面是一个示例：http://codepen.io/overthemike/pen/wzjRKa

本质上，您将字体大小设置为0，并以足够快的速度将其转换为所需的高度，而不是高度、最大高度或scaleY（）等。用CSS将实际高度转换为auto目前是不可能的，但转换内容是可能的，因此字体大小转换。

注意-代码笔中有javascript，但它的唯一目的是在手风琴上单击时添加/删除css类。这可以通过隐藏的单选按钮来完成，但我并没有专注于此，只是高度转换。