How to expand text area up to 100% using only CSS

Question

I have a textarea tag that has text that I want the user to edit. The textarea tag is wrapped inside a div as follows:

div.container { width: 295px; max-height: 250px; overflow: auto; position: relative; border: 1px solid: #EEEEEE; } textarea { width: 270px; height: 100%; resize: none; overflow: hidden; border: none; } <div class="container"> <textarea id="overview"> blah blah.... </textarea> </div> 

Div has a fixed width, maximum height and shows scrollbars when the height is too high. All this is fine, but how can I expand textarea to 100%? Currently, only two lines are tall and do not expand to show all the text when I have a lot of text inside it. Please see this script to find out what I'm talking about.

Answer 1

Your div.container requires the specified height. The contents of the child will not expand to max-height , just height .

Something like this: http://jsfiddle.net/dpF7k/ or more simply apply directly to textarea instead of a wrapping div: http://jsfiddle.net/ujKCf/

The only thing missing is that it does not shrink below 250 pixels if there is less content.

Answer 2

The text field can only expand to div#container

As long as you set the max-height: 250px , it will not expand to that size unless something pushes it. Since your text box is 100%, it just uses whatever is available.

To understand what I mean, just set the container height: 250px instead of max-height .

Answer 3

Instead, you can use JavaScript to solve this problem.

This is the jQuery plugin by James Padolsi. It looks like he will do exactly what you want.

Edit: I thought the OP doesn't want the scrollbar to overflow ... NVM then