使用CSS将元素放置在另一个元素内

Question

我有一个包含DIV的容器，里面的DIV较小。

• 较小的DIV位于底部，并有两行。

• 默认情况下，第一行位于容器DIV边界之外，并且被overflow：none隐藏。

• 悬停时，较小的DIV会向上滑动，因此两行都可见。

问题：

• 当我知道两行的高度时，就可以使用它进行绝对定位。

• 如果我不知道两行的高度，有没有办法做到这一点？

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@                                         @
@          No hover                       @
@                                         @
@                                         @
@                                         @
@                                         @
@                                         @
@     _____________________________       @
@    |                             |      @
@    |                             |      @
@@@@  -----------------------------  @@@@@@
     |                             | 
     |    (this row hidden)        |
     |_____________________________|



@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@                                         @
@          With hover                     @
@                                         @
@                                         @
@                                         @
@      _____________________________      @
@     |                             |     @
@     |                             |     @
@      -----------------------------      @
@     |                             |     @
@     |                             |     @
@     |_____________________________|     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Answer 1

如果我很了解您的草案，我会发布解决方案。我尝试使其变得简单，没有任何溢出：仅显示和隐藏第二行，并以其最大高度来呈现不错的幻灯片效果。我认为结果是一样的。我使用CSS进行转换，但是您也可以根据需要使用jquery进行转换。

.parent{
    height: 300px;
    background-color: #ff0000;

    display: flex;
    flex-direction: column;
}
.child{
    margin-top: auto;

    background-color: #00ffff;
}

.child .row2{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
}

.parent:hover .child .row2{
    max-height: 400px;
}

 <div class="parent">
  
    <div class="child">
        <div class="row1" style="background-color:#0000ff">
            Row1 
        </div>
        <div class="row2" style="background-color:#00ff00">
            Hello! Now you can see me but you don't know my height!
        </div>
     </div>
 </div>