将具有动态高度的div从其父容器中移出 [英] Move div with dynamic height out of its parent container

问题描述

我正在尝试将具有动态变化高度的div从其父div移出并返回.

问题是动态高度，否则我可以轻松地将负高度设置为最低值. 目前，我只是将较大数量的负像素设置为底值，但这不是很好，并且不能正确解决问题. (从逻辑上讲，这种情况很少发生: 小提琴 ) 希望下面的示例阐明我的尝试.

我当时正在考虑使用 transforms ，但是我也没有找到解决方案.

我当然可以使用JavaScript做到这一点，但是作为每个人我更喜欢纯CSS解决方案:)

 #outer {
    position: relative;
    width: 400px;
    height: 400px;
    background: black;
    overflow: hidden;
}

#inner {
    position: absolute;
    bottom: -500px;
      /*
        It's working but ugly and not perfect.
        The value I need would be the height of the inner div, but it is dynamic
      */
    width: 100%;
    background: red;
    transition: 0.4s;
}

#outer:hover #inner {
    transition: 0.4s;
    bottom: 0;
} 

 <div id="outer">
    <div id="inner">
        Some expanding text here
    </div>
</div>   

解决方案

您可以使用CSS transform:translateY(100%)属性，因此高度是根据元素本身计算的.然后在悬停时将值重置为0.

检查该元素，您将能够确切地看到它的高度和位置.

还要查看transform的支持表，并在需要时添加前缀. /p>

更新了JsFiddle

 .outer {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    background: grey;
    overflow: hidden;
}
.inner {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: aqua;
    transition: 0.4s;
    transform: translateY(100%);
}
.outer:hover .inner {
    bottom: 0;
    transform: translateY(0);
} 

 <div class="outer">
    <div class="inner">Some expanding text here..</div>
</div> 

I'm trying to move a div with a dynamically changing height out of it's parent div and back in.

The problem is the dynamically height, otherwise I could easily set the negative height as the bottom value. For now I just set a large negative number of pixels as the bottom value, but it isn't very nice and does not solve the problem properly. (logically this happens for small numbers: fiddle) Hopefully the example below clarifies what I try to do.

I was thinking about using transforms instead, but i did not find a solution as well.

Of course I could do this with JavaScript, but as everyone I prefer a pure CSS solution :)

#outer {
    position: relative;
    width: 400px;
    height: 400px;
    background: black;
    overflow: hidden;
}

#inner {
    position: absolute;
    bottom: -500px;
      /*
        It's working but ugly and not perfect.
        The value I need would be the height of the inner div, but it is dynamic
      */
    width: 100%;
    background: red;
    transition: 0.4s;
}

#outer:hover #inner {
    transition: 0.4s;
    bottom: 0;
}

<div id="outer">
    <div id="inner">
        Some expanding text here
    </div>
</div>  

解决方案

You could use CSS transform:translateY(100%) property, so the height is calculated based on the element itself. Then reset the value to 0 on hover.

Inspect the element, you'll be able to see exact the height and position of it.

Also take a look of support tables for transform, and prefix it if necessary.

Updated JsFiddle

.outer {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    background: grey;
    overflow: hidden;
}
.inner {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: aqua;
    transition: 0.4s;
    transform: translateY(100%);
}
.outer:hover .inner {
    bottom: 0;
    transform: translateY(0);
}

<div class="outer">
    <div class="inner">Some expanding text here..</div>
</div>

这篇关于将具有动态高度的div从其父容器中移出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！