Move div with dynamic height out of its parent con

问题:

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>  

回答1:

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>

回答2:

If I understand your issue, you can set a max-height for its normal and :hover state and transition it. However, you must set it to a max-height that you know will always be tall enough (which may lead to random speeds depending on how much content there is).

So something like: JS Fiddle

.outer {
    position: relative;
    display: inline-block;
    width: 400px;
    height: 400px;
    background: black;
    overflow: hidden;
}
.inner {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: red;
    transition: 0.4s;
    max-height: 0;
    overflow: hidden;

}
.outer:hover .inner {
    transition: 0.4s;
    bottom: 0;
    max-height: 40px;
}

Otherwise, I would recommend a JS solution.