How do I get textarea that starts midpage to extend to bottom of containing div (and resize with it)?

Question

http://www.jsfiddle.net/Zn4BH/1/

HTML:

<div  id="divOutput">
    <h1>Output</h1> 
    <div id="divButtons">
        <button>One</button>
        <button>Two</button>
    </div>
    <textarea name="tarOutput" id="tarOutput">[Text]</textarea>
</div>

CSS:

#divOutput {
    border: 2px solid #000;
    background-color: #f90;
    padding: 10px;
    height: 300px
}

#divButtons {
    border: 2px solid #000;
    background-color: #fb0;
    margin-top: 10px;
    padding: 2px;
}

textarea {
    margin-top: 10px;
    width: 100%;
    height: 100%;  /* ??? Doesn't seem to work */
}

Answer 1

Take a look at this post: http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin