CSS：div调整大小取决于原始大小

Question

I have time blocks whose size is calculated programmatically. 我有一些时间块，它们的大小是通过程序计算的。

The objective is: 目的是：

-If the content is bigger than its container, when you hover over the element it expands to show all of it. -如果内容大于其容器，则将鼠标悬停在元素上时，它将展开以显示所有内容。

-If the content is smaller than its container, nothing happens. -如果内容小于其容器，则什么也不会发生。

Here is a fiddle . 这是一个小提琴。

Note : 注意事项 ：

-Red means it is how it currently is. -红色表示当前状态。

-Green is my objective. -绿色是我的目标。

I'm using Angular, so a javascript solution would be accepted. 我正在使用Angular，因此可以接受javascript解决方案。

Fiddle HTML: 小提琴HTML：

 .current { width: 200px; background-color: red; margin-right: 10px; float: left; overflow: hidden; } .current:hover { height: auto !important; } .supposed { width: 200px; background-color: lightgreen; margin-right: 10px; float: left; overflow: hidden; } .supposed.small:hover { height: auto !important; } .small { height: 50px; } .big { height: 100px; } .content { height: 75px; background-color: rgba(0,0,0,0.5); }

 <body> <div class="current small"> <div class=" content"> </div> </div> <div class="current big"> <div class="content"> </div> </div> <div class="supposed small"> <div class="content"> </div> </div> <div class="supposed big"> <div class="content"> </div> </div> </body>

Answer 1

CSS: CSS：

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

HTML with Angular: 带有Angular的HTML：

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

The setting of the content height to 100% ensures that hovering over .current equals to hovering over .content. 将内容高度设置为100％可确保将鼠标悬停在.current上等于将鼠标悬停在.content上。

The setting of "height: calculateHeight()+'em'" gives the desired effect of making .current bigger if .content should bigger than .current. 如果.content大于.current，则设置“ height：calculateHeight（）+'em'”将提供使.current更大的预期效果。

The setting of "min-height: inherit" ensures that .content is allways at least as big as it was before. “最小高度：继承”的设置可确保.content始终至少与以前一样大。

@elveti: thanks for the inspiration with max-height. @elveti：感谢max-height的启发。

Answer 2

Using just CSS, instead of setting the height of the container to auto when hovering the div, you can set the overflow to visible. 您可以仅使用CSS，而不是将鼠标悬停在div上时将容器的高度设置为auto，而可以将溢出设置为visible。

This way the "hidden" inner will be seen when hovering while the container will remain the same if the inner is smaller. 这样，当悬停时将看到“隐藏的”内部，而如果内部较小，则容器将保持不变。

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

https://jsfiddle.net/kkw22eby/4/ https://jsfiddle.net/kkw22eby/4/

Answer 3

If think you could do this by using max-height instead of height on the parents and setting the height on the .content child. 如果认为你可以通过做这个max-height ，而不是height对父母和设置上的高度.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;
}

https://jsfiddle.net/c4jhvd8m/ https://jsfiddle.net/c4jhvd8m/

CSS：div调整大小取决于原始大小

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-10-21 11:05:18

解决方案2
1 2016-10-21 09:33:09

解决方案3
1 2016-10-21 09:59:23

CSS：div调整大小取决于原始大小

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-10-21 11:05:18

解决方案2 1 2016-10-21 09:33:09

解决方案3 1 2016-10-21 09:59:23

解决方案1
2 已采纳 2016-10-21 11:05:18

解决方案2
1 2016-10-21 09:33:09

解决方案3
1 2016-10-21 09:59:23