JSFiddle - React, Tailwind, and code Playground
HTML
<body onload="javascript:init();">
<div id="zalupa">
<div id="container">
<div id="discussion">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
...
CSS
body, html {
height: 100%;
}
#zalupa{
height: 90%;
}
#container {
vertical-align: top;
width: 98%;
height: 90%;
padding: 5px;
}
#discussion {
width: 99%;
height: 90%;
overflow-y: auto;
border: 1px solid #ccc;
padding: 5px;
text-align: left;
/*position: absolute; bottom: 0; left: 0;*/
position: relative;
}
#content {
overflow-y: auto;
}
#message {
width: 100%;
vertical-align:bottom;
padding: 5px;
border: 1px solid #ccc;
}
JavaScript
function init() {
var message = $('#message');
var content = $('#content');
message.keypress(function (e) {
if (e.keyCode == 13 && message.val().length > 0) {
content.append(message.val() + "<br/>");
//content.scrollTop(discussion.get(0).scrollHeight); //works fine with top to down
message.val('').focus();
}
});
};