Define a fixed height for chat and auto-scroll.

sendOnEnter.js

@@ -7,4 +7,22 @@ jQuery(document).ready(function(){
       jQuery('#send').click();
     }
   });
-})
+})
+
+// We don't yet have an API to know when an element is updated, so we'll poll
+// and if we find the content has changed, we'll scroll down to show the new
+// comments.
+var oldContent = null;
+window.setInterval(function() {
+  var elem = document.getElementById('chat');
+  if (oldContent != elem.innerHTML){
+    scrollToBottom();
+  }
+  oldContent = elem.innerHTML;  
+}, 300);
+
+// Scroll to the bottom of the chat window.
+function scrollToBottom(){
+  var elem = document.getElementById('chat');
+  elem.scrollTop = elem.scrollHeight;
+}

shinychat.css

@@ -1,6 +1,8 @@
 #chat {
   padding: .5em;
   border: 1px solid #777;
+  height: 300px;
+  overflow: scroll;
 }
 
 .user-change, .user-exit, .user-enter {
@@ -26,4 +28,13 @@
   color: #AAA;
   text-align: right;
   padding: 30px 0;
-}
+}
+
+html, body {
+    height: 100%;
+}
+
+.fill { 
+    min-height: 100%;
+    height: 100%;
+}