title: css position:absolute, bottom:0 with parent overflow:auto
body: <p>This is a chat room, there is a div .words as container, and a .content div inside it. </p>
  
  <p>I want the text display from bottom of .content, so I use position:absolute, bottom:0; on .content. but I want it show scroll bar if .content grow higher than .words. So I add overflow:auto on .words.</p>
  
  <p>if I remove bottom:0, overflow:auto will work correctly. but it not works if bottom:0.</p>
  
  <p>how to make the input show from bottom, and will have scrollbar when overflow?</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.tbchat-room{
      position: fixed;
      bottom:0;
      width:260px;
      border:1px solid #aaa;
      background:#fff;
  }
  
  .tbchat-room .head{
      padding: 3px 10px;
      background:#3d9ac1;
      color:#fff;
  }
  
  .tbchat-room .words{
      height:230px;
      background:#ececec;
      overflow:auto;
      position:relative;
  }
  
  .tbchat-room .words .content{
      position:absolute;
  }
  
  .tbchat-room .say{
      width:246px;
      margin:0;
      border-top: 1px solid #ccc;
      border-bottom: 0;
      border-left: 0;
      border-right: 0;
      padding:4px 6px;
  }
  
  .pull-right{
      float:right;
  }
  
  .content{
      padding:5px 10px;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="tbchat-room"&gt;
      &lt;div class="head"&gt;
          &lt;span class="title"&gt;Chat Room&lt;/span&gt;
          &lt;a class="room-close-button pull-right"&gt;&amp;times;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="words"&gt;
          &lt;div class="content"&gt;
              &lt;div&gt;sample text&lt;/div&gt;
              &lt;div&gt;sample text&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;input class="say" type="text"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/s8jD5/" rel="nofollow">http://jsfiddle.net/s8jD5/</a></p>