max-height实现展开收缩动画
/*css*/ .element{ max-height: 0; overflow: hidden; transition: max-height .25s; background-color: pink; } :checked ~ .element{ max-height: 2000px; /*足够存放内容的高度*/ } /*html*/ <input id="check" type="checkbox"> <div class="element"> <div class="box" style="width: 100%;height: 800px"></div> </div> <label for="check" >收缩</label>
注:max-height设置的足够大后实际高度就由盒子的内容高度决定。