title: CSS for messaging system scroll messages and always keep the reply box at the bottom of the screen
body: <p>So I'm working on styling my message/conversation page of my website and I'm running into a little difficulty.</p>
  <p>This is what I would like to work out in the end. When opening a conversation the last 15-20 messages will be loaded into a div but I would like the div to fit in one page. What I mean by that is that the div should be the height of the screen the only thing that I want to scroll up and down is the messages.</p>
  <p>The header of my website should always be visible. When you scroll down and get to the end of the conversation the whole page scrolls down a bit to display the footer of my website.</p>
  <p>What I want pretty much looks like the Facebook messaging page.</p>
  <p><img src="https://i.stack.imgur.com/xVQC8.png" alt="enter image description here" /></p>
  <p>I don't know if you can understand what I am asking so I'm adding a little example with the Facebook message page (the scrollbar is not on the picture). In the image it is what you get when you load the page, if then you scroll down there will be the footer that will appear if you scroll up the reply box will stick to the bottom of the screen and the only thing that moves is the conversation (the middle red square)</p>
  <p>Once this will work I will be adding a feature to load messages once you get to the top of the loaded messages.</p>
  <p>I'm not sur if it is possible to do this with only CSS, I'm pretty sure I will have to use some Jquery at some point but I would like to make everything that is possible in CSS with CSS.</p>
  <p>I have no real idea how to make this happen.</p>