CSSを使用してTextareaを100％に拡張する方法

Question

私は、ユーザーが編集したいテキストを持つtextareaタグを持っています。 textareaタグはそうのようなdivの内にラップされています

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が固定幅、最大高さを持っており、高さが大きすぎる場合、スクロールバーが表示されます。このすべては問題ありませんが、textareaを100％に拡張するにはどうすればよいですか？現在、2行の高さしかありません。その中にたくさんのテキストがある場合、すべてのテキストを表示するように展開しません。 Please see this fiddle to see what I'm talking about.

Answer 1

div.containerには明示的な高さが指定されている必要があります。子供のコンテンツはmax-height（height）まで拡張されません。このような

何か： http://jsfiddle.net/dpF7k/ 以上は、単に代わりにラッピングのdivのテキストエリアに直接適用：http://jsfiddle.net/ujKCf/

欠けている唯一のものは少ないコンテンツがある場合、それは250ピクセル未満に縮小していないということです。

Answer 2

テキストエリアにのみ、あなたがmax-height: 250pxであるためにあなたのコンテナを設定している間に何かがそれをプッシュしていない限り、それはその大きさに拡大していないだろう

div#containerほどの大きな展開することができます。あなたのテキストエリアは100％なので、利用可能なものを使用します。

私が何を意味するかを見るには、max-heightの代わりにheight: 250pxになるようにコンテナを設定してください。

Answer 3

代わりにJavaScriptを使用して解決できます。

これはJames PadolseyのjQuery pluginです。それはあなたが望むものとまったく同じように見えます。

編集：私はOPがオーバーフローのためにスクロールバーを望んでいないと思った... NVM then