Stacking Divs from Bottom to Top
A more modern answer to this would be to use flexbox
.
As with many other modern features, they won't work in legacy browsers, so unless you're ready to ditch support for browsers from the IE8-9 era you will need to look for another method.
Here's how it's done:
.parent {
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.child {
/* whatever */
}
And that's all you need. For further reading on flexbox
, see MDN.
Here's an example of this with some basic styling: http://codepen.io/Mest/pen/Gnbfk
All the answers miss the scrollbar point of your question. And it's a tough one. If you only need this to work for modern browsers and IE 8+ you can use table positioning, vertical-align:bottom
and max-height
. See MDN for specific browser compatibility.
Demo (vertical-align)
.wrapper {
display: table-cell;
vertical-align: bottom;
height: 200px;
}
.content {
max-height: 200px;
overflow: auto;
}
html
<div class="wrapper">
<div class="content">
<div>row 1</div>
<div>row 2</div>
<div>row 3</div>
</div>
</div>
Other than that, I think it's not possible with CSS only. You can make elements stick to the bottom of their container with position:absolute
, but it'll take them out of the flow. As a result they won't stretch and make the container to be scrollable.
Demo (position-absolute)
.wrapper {
position: relative;
height: 200px;
}
.content {
position: absolute;
bottom: 0;
width: 100%;
}