It Is Possible to Expand a Textarea Only with CSS

It is possible to expand a textarea only with CSS?

Instead of textarea , you can use div with contentEditable attribute:

div {

  display: inline-block;

  border: solid 1px #000;

  min-height: 200px;

  width: 300px;

}

<div contentEditable="true"></div>

CSS Textarea that expands as you type text

This cannot be done with CSS alone. try the autogrow jquery plugin.
https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js

You can also see autogrow demo here http://onehackoranother.com/projects/jquery/jquery-grab-bag/autogrow-textarea.html

It's lightweight and easy to use. Here's how it's done. Define your textarea id. Include the jquery js file before </body>. Then between script tags, issue the jquery command $("#txtInput").autoGrow();

<body>
    <textarea id="txtInput"></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 

<script>
    $("#txtInput").autogrow();
</script>
</body>

How To Expand A Textarea To 100% Using CSS Only

Your div.container needs an explicit height specified. Child contents won't expand up to a max-height, just height.

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

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

How to expand a textarea to its content and disable manual resizing using CSS and jQuery

This did the trick using jQuery, if anyone is looking for a reliable solution that can stand over a milion characters and process the height in less than 5 seconds!

$('textarea').on('input propertychange paste', function() {

  adjustTextareaHeight(this);

 });

function adjustTextareaHeight( ta ) {

  //Get the height of any padding and border that's computed by jQuery in .height

  var  padAndBordHeight = $(ta).outerHeight()-$(ta).height();

  // because the scrollbar can cause calculation problems

  $(ta).css( "overflow", "hidden" );

  //Make the height of the <textarea> 0 to be able to get an "adjusted to content" read of the .scrollHeight

  $(ta).height(0);

  //Make the height of the <textarea> as tall as the .scrollHeight as it has wrapped the content of the text area

  $(ta).height(ta.scrollHeight-(padAndBordHeight));

  $(ta).parent().find("strong").toggleClass("visible",ta.scrollHeight>ta.offsetHeight);

  //log the amount of lines in the console /!\ 20 is my line height /!\

  /*console.log("There are "+Math.ceil($(ta).height()/20)+" lines in the current textarea");*//*my line heigh is 34*/

 }

function textareaBlur(ta){

 $(ta).height(20);

 $(ta).parent().find("strong").toggleClass("visible",ta.scrollHeight>ta.offsetHeight);

}

$('textarea').each(function() {

adjustTextareaHeight(this);

})

/* textarea needs a line-height for the javascript to work */

#ta, #foo {

  display:block;

    width: 300px;

    line-height: 20px;

    height:20px;

    resize:none;

    overflow:hidden;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="lines">...</div>

<textarea id="ta" rows="1" onfocus="adjustTextareaHeight(this);" onblur="textareaBlur(this)"></textarea>

<textarea id="foo" rows="1" onfocus="adjustTextareaHeight(this);" onblur="textareaBlur(this)"></textarea>

CSS rule to auto-resize textarea upon text

This cannot be done using pure CSS at least for <textarea>, the reason being, interaction can be captured only by JavaScript. But you can make something like <div> having a contenteditable, a fake <textarea> can be made possible.

Snippet

div {

  display:inline-block;

  border: solid 1px #999;

  min-height: 100px;

  width: 300px;

}

<div contentEditable></div>

Is there a way to get a textarea to stretch to fit its content without using PHP or JavaScript?

Not really. This is normally done using javascript.

there is a good discussion of ways of doing this here...

Autosizing textarea using Prototype

It Is Possible to Expand a Textarea Only with CSS