Доброй ночи, коллеги.. Никак не получается привязать содержимое дива к его низу..
Ну и чтоб кроссбраузерно было разумеется..
Чо я только не делал уже..
Если прописать диву display:table-cell; vertical-align:bottom;
то атрибут таблиц width перестаёт быть резиновым почему то,
да плюс ко всему прочему пропадает скролл на диве((
Вопсчим, жесть
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// расчёт высоты div#outer
// (обязательно нужно, не буду объяснять зачем,
// т.к. пример сильно упрощённый)
var window_h = $(window).height();
var outer_h=window_h-200;
$("#outer").css({'overflow-y': 'scroll', 'height': outer_h, 'width': '100%'});
block = mess("Вася Пупкин", "Всем привет, меня зовут Василий.", "11.09.2011") +
mess("Стояна Ракова", "Всем привет, я Стояна.", "10.09.2011");
$('#topic').scrollTop($('#topic').html(block));
});
function mess(users_name, message, date_string) {
var mess_block = '<table width=100% border="1" style="margin-bottom:10px"> \
<tr> \
<td><p><b>' + users_name + '</b></p></td> \
<td align="right"><p>' + date_string + '</p></td> \
</tr> \
<tr> \
<td colspan=2><p>' + message + '</p></td> \
</tr> \
</table>';
return mess_block;
}
</script>
<body style="margin:0">
<div style="background-color:#CCC; height:200px; border: 1px solid"><h1>Ш А П К А</h1></div>
<div id="outer">
<div id="topic"></div>
</div>
</body>
Пример в дейстивии