css - 使用 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>