Stack divs from bottom to top

Question

I'm creating a chat application and need to align messages from users the way is done in Skype, from bottom to top.

A solution was found here, but it has couple of flaws.

the height of container is a fixed height, I need to cover all available height of the window (if I use height: 100%, it shrinks completely).
The height of the message item is fixed, I need it to adjust to its content height.

Having a poor experience with CSS I'm having troubles to fix these 2 issues. Can someone point to a solution?

Both limitations are not fundamental in this method. See JSbin without these limitations: http://jsbin.com/ukumer/1/edit — Ilya Streltsyn, Jul 29 '13 at 01:30

score 0 · Answer 1 · answered Jul 29 '13 at 02:59

0

It could be easier if you have provided your own jsfiddle. But anyway, I'm trying to answer your question by taking @IlyaStreltsyn jsbin.

You can position to be fixed and set vertical-align bottom and apply the gap from bottom. Here I have used 0px for demonstration.

.wrapper {
  display: table-cell;
  vertical-align: bottom;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
}

answered Jul 29 '13 at 02:59

If any problem, please ask your question. – Bhojendra Rauniyar Jul 29 '13 at 03:00

1 Answers1