Javascript CSS:Div根据原始大小调整大小

我有一些时间块，其大小是通过编程计算的

目标是：

-如果内容大于其容器，当您将鼠标悬停在元素上时，它将展开以显示所有内容

-如果内容小于其容器，则不会发生任何事情

这是一本书

注意：

-红色表示当前的状态

-绿色是我的目标

我使用的是Angular，所以可以接受javascript解决方案

Fiddle HTML：

.current{
宽度：200px；
背景色：红色；
右边距：10px；
浮动：左；
溢出：隐藏；
}
.当前：悬停{
高度：自动！重要；
}
.假设{
宽度：200px；
背景颜色：浅绿色；
右边距：10px；
浮动：左；
溢出：隐藏；
}
.假设.小：悬停{
高度：自动！重要；
}
.小{
高度：50px；
}
.大{
高度：100px；
}
.内容{
高度：75px；
背景色：rgba（0,0,0,0.5）；
}

---

仅使用CSS，而不是在悬停div时将容器高度设置为自动，您可以将溢出设置为可见

这样，悬停时将看到“隐藏”内部，而如果内部较小，则容器将保持不变

.current:hover {
  //height: auto !important;
  overflow:visible;
}

---

如果您认为可以通过在父项上使用

最大高度

而不是

高度

，并在

.content

子项上设置高度来实现此目的

.small .content {
  height: 75px;
}
.big .content {
  height: 500px;
}
.small,
.big {
  transition: max-height 0.4s; /* Animates the max-height */
}
.small {
  max-height: 100px;
}
.big {
  max-height: 150px;
}
.current:hover {
  max-height: 3000px !important; /* Will be animated to height:auto and then it stops */
}
.content {
  background-color: #369;
}

CSS:

.content {
    height: 100%;
}
.current:hover {
    height: auto !important;
}
.content:hover {
    min-height: inherit;
}

带角度的HTML：

<div class="current" ng-style="{height: calculateHeight()+'em',min-height: calculateHeight()+'em',}">
</div>

将内容高度设置为100%可确保悬停在.current上等于悬停在.content上

“height:calculateHeight（）+'em'”的设置提供了使.current变大的所需效果，如果.content应该大于.current

“最小高度：继承”的设置确保。内容始终至少与以前一样大

---

@埃尔维蒂：感谢max height的灵感。

你在小提琴上遇到了什么问题，应该有什么不同？转到第二个红色的div，在下方移动鼠标，我希望它像绿色的大正方形一样，行为明智。问题是，在我的应用程序中，它看起来不太好，由于背景中有线条，因此无法显示此事件何时发生。而且看起来也不太好：-/