title: How to autosize contenteditable element?
body: <p>Here is my contenteditable element:</p>
  
  <pre><code>    #editor {
          width: 200px;
          height: 30px;
          border: 1px solid red;
          overflow: hidden;
      }
      &lt;div id="editor" contenteditable="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I want it can autosize according to the user's content. I try to listen to <code>keyup</code> event:</p>
  
  <pre><code>    editor.addEventListener("keyup", function (){
          newheight = editor.scrollHeight;
          editor.style.height = newheight + "px";
      })   
  </code></pre>
  
  <p>this could work when the div grow higher, but when user delete all content, the div can't be shorter.</p>
  
  <p>How can I let it be autosize?</p>
  
  <p>DEMO <a href="http://jsfiddle.net/5nYub/" rel="nofollow">here</a></p>