Vary chatbox height size

app/javascripts/components/main.js

@@ -178,6 +178,7 @@ const GatherPage = React.createClass({
 			soundController: new SoundController(),
 			showMessageBox: true,
 			collapseMenu: false,
+			chatContainerHeight: 500,
 			connectionState: "connected"
 		};
 	},
@@ -193,6 +194,9 @@ const GatherPage = React.createClass({
 
 		this.updateTitle();
 
+		$(window).resize(_.debounce(this.reloadChatContainerHeight, 250));
+		this.reloadChatContainerHeight();
+
 		socket.on('stateChange', data => {
 			let state = data.state;
 			
@@ -290,6 +294,13 @@ const GatherPage = React.createClass({
 		}
 	},
 
+	reloadChatContainerHeight() {
+		let chatContainer = document.getElementById("chat-container");
+		if (chatContainer) {
+			this.setState({ chatContainerHeight: chatContainer.clientHeight });
+		}
+	},
+
 	toggleEventsPanel(event) {
 		let newState = event.target.checked;
 		this.setState({ showEventsPanel: newState });
@@ -390,7 +401,8 @@ const GatherPage = React.createClass({
 				</li>
 			);
 			chatroom = <Chatroom messages={this.state.messages} 
-									user={this.state.user} socket={socket} />;
+									user={this.state.user} socket={socket} 
+									containerHeight={this.state.chatContainerHeight}/>;
 			currentUser = (
 				<ul className="nav navbar-top-links navbar-right" id="currentuser">
 					<CurrentUser user={this.state.user} />
@@ -506,12 +518,15 @@ const GatherPage = React.createClass({
 						</div>
 					</section>
 				</div>
-				<aside className="control-sidebar control-sidebar-dark" style={{"position": "fixed", "height": "auto"}}>
+				<aside className="control-sidebar control-sidebar-dark" 
+					style={{"position": "fixed", "height": "auto"}}>
 					<div className="chat-container">
 						{chatroom}
 					</div>
 				</aside>
-				<div className="control-sidebar-bg" style={{"position":"fixed", "height":"auto"}}></div>
+				<div className="control-sidebar-bg" 
+					id="chat-container"
+					style={{"position":"fixed", "height":"auto"}}></div>
 			</div>
 		);
 	}

app/javascripts/components/message.js

@@ -250,6 +250,7 @@ const Chatroom = exports.Chatroom = React.createClass({
 		if (prevProps.messages.length < this.props.messages.length) {
 			this.scrollToBottom();
 		}
+		console.log(this.props.containerHeight);
 	},
 
 	scrollToBottom() {
@@ -270,7 +271,8 @@ const Chatroom = exports.Chatroom = React.createClass({
 		});
 		return (
 			<div>
-				<ul className="chat" id="chatmessages" ref="messageContainer">
+				<ul className="chat" id="chatmessages" ref="messageContainer" 
+					style={{height: this.props.containerHeight - 170}}>
 					<li className="text-center">
 						<a href="#"
 							onClick={this.loadMoreMessages}