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 */
}

score 1 · Answer 1 · edited May 23 '17 at 12:04

1

Take a look at this post: CSS 100% height with padding/margin

edited May 23 '17 at 12:04

Community

1
1

answered Oct 22 '10 at 14:40

Diodeus - James MacFarlane

112,730
33
157
176

Good reference. Thanks to your reference question I see I can set the textarea top margin to say "200px" (and other margins to 10px). But I still want the top of the textarea to automatically be positioned after the h1 and #divButtons elements, not at a fixed position. Maybe I'll look at jQuery... – Stan Oct 22 '10 at 16:05

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

1 Answers1