Question

我试图严格使用CSS（3）根据它所具有的类来设置更大和更小的div的高度。问题是较大的高度可能/应该根据div中的内容量而变化。

这是我目前的代码：

 .failure-info{ width:97%; 
    padding:.2em .5em 0 .5em; 
    overflow:hidden; 
    cursor:pointer; 
    -moz-transition-property: height; -moz-transition-duration: .7s;
    -webkit-transition-property: height; -webkit-transition-duration: .7s;
    transition-property: height; transition-duration: .7s; 
 }
.failure-info.height-small{ height:16px; }
.failure-info.height-large{ height:85px; }

这很有效，除非将更多内容添加到.failure-info并且内部html超过大类的85px高度。添加了内容，并且通过jquery更改了类，所以如果不能用纯CSS完成，我对使用jquery函数这样做并不是不利的。但是，如果可能的话，我想保留CSS！

有什么想法吗？提前谢谢。

Answer 1

根据为此问题发布的答案然后删除（出于某种原因）我能够得到我想要的结果。这是代码：

.failure-info{ width:98%; padding:3px 1% 0 1%; overflow:hidden; cursor:pointer; max-height:16px;
   -moz-transition-property: max-height; -moz-transition-duration: .7s;
   -webkit-transition-property: max-height; -webkit-transition-duration: .7s;
   transition-property: max-height; transition-duration: .7s; 
 }
.failure-info.height-small{ max-height:16px;  }
.failure-info.height-large{ max-height:150px; }

所以，基本上我使用max-height属性而不是过渡效果的height属性，只要max-height相对接近于元素的总高度应该最终为止（之后）所有必要的元素都已添加到内部）然后动画将适当地计时。

CSS3动画高度的动画高度

1 个答案: