Стек divs снизу вверх

Question

Я создаю приложение чата и должен выравнивать сообщения от пользователей так, как это делается в Skype, снизу вверх.

Решение было найдено here, , но у него есть пара недостатков.

1. высота контейнера фиксированная высота, мне нужно покрыть всю доступную высоту окна (если я использую высоту: 100%, она полностью сжимается).
2. Высота элемента сообщения фиксирована, мне нужно его настроить на его высоту содержимого.

Имея плохой опыт работы с CSS У меня возникли проблемы, чтобы исправить эти 2 проблемы. Может ли кто-нибудь указать на решение?

Answer 1

Это может быть проще, если вы предоставили свой собственный jsfiddle. Но в любом случае, я пытаюсь ответить на ваш вопрос, приняв @IlyaStreltsyn jsbin.

Вы можете зафиксировать положение и установить вертикальное выравнивание снизу и нанести зазор снизу. Здесь я использовал 0px для демонстрации.

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

jsfiddle demo