Align the div to the bottom without removing it from the stream

Question

I need to align the div at the bottom of the parent div. You can just tell me to use position: absolute;and bottom: 0px;, but I cannot remove the div from the stream.

My HTML markup looks like this:

<div class=parent>
    <div class=child>
        Lorem ipsum dolor sit amet
    </div>
</div>

Parent div has dynamic height. Sometimes it is as tall as necessary to show all its content (height: auto;), but sometimes it has a fixed height that is less than the height of the child. In this case, I want the child to be outside the parent at the top edge. The child always has height: auto;to match its contents, which I also do not know during development.

What I have tried to be using position: absolute;, and bottom: 0px;for the child div, but it removes the child from the stream; thus, the parent div will not be able to display its contents as long as it has height: auto;active. I also tried to use display: table-cell;it vertical-align: bottom;for the parent, but this, apparently, makes it impossible to give him a height less than the content.

If all else fails, I can still try the JS solution, but I'm sure it should somehow use plain CSS, even if I need to change my HTML and insert a div wrapper or something like that.

Answer 1

Like this?

.parent {
    margin-top:-16px;
    background-color: gold;
    height: 88px;
    position:relative;
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%);
    transition:1s all;
    z-index:-1;
}
.down {
    -webkit-transform:translateY(0);
    transform:translateY(0);
}

$(".header").click(function () {
    $(".parent").toggleClass('down');
});

Demo

,

Linek, , , . , margin-top. IE8