title: position a div at bottom of screen but dont allow content behind it
body: <p>I am trying to make chat app like layout with CSS. So for this I need a input text at the bottom of the screen. I put it with <code>position:fixed; bottom: 0;</code> and it is fixed at bottom so its good but the problem is when the messages above it are increasing they are going behind the input div and hiding there, last message even not showing when scroll.</p>
  
  <p>Code is:</p>
  
  <pre><code>&lt;div id='chat_window'&gt;
      &lt;ul id="messages" style="list-style-type: none; margin: 0; padding: 0;"&gt;&lt;/ul&gt;
      &lt;div class="panel-footer" style="position: fixed; bottom: 0;"&gt;
          &lt;div class="input-group"&gt;
              &lt;input id="my_msg" type="text" class="form-control input-sm" placeholder="Type your message..."&gt;
              &lt;span class="input-group-btn"&gt;
                  &lt;button class="btn btn-warning btn-sm" id="my_msg_submit"&gt;Send&lt;/button&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So what is the best way to make the messages not go behind the input and only be above the input always for different screen heights?</p>