Dynamically resize textarea upwards

Question

I'm trying to create a textarea that automatically re-sizes upwards. I've got a bit of code that works fine at resizing by pushing the bottom down but I need it so all the content in the text area moves up to reveal a new line and the base of the text-area is fixed in its position. (Let me know if I didn't explain that very well!) The code I have so far is:

document.getElementById('texttype').addEventListener('keyup', function () {
    this.style.height = 0;
    this.style.height = this.scrollHeight + 'px';
}, false);

Answer 1

This was answered by Tewathia in the comments but I thought I should add an answer so I could check it off. Fiddle: http://jsfiddle.net/afQmf/

HTML:

<div><textarea name="" id="texttype"></textarea></div>

CSS:

    div {
    position:relative;
    height:200px;
}

   #texttype {
    width:200px;
    position: absolute;
    bottom:0;
}

Javascript:

    document.getElementById('texttype').addEventListener('keyup', function () {
    this.style.height = 0;
    this.style.height = this.scrollHeight + 'px';
    }, false);