1. About textarea and Height Adaptation
The textarea tag is a form element typically used for multi-line text input. Common examples in web applications include comment input boxes and microblog information input boxes. For instance, the input box for Tencent Weibo:

As a multi-line text area, textarea meets most of our needs. However, one drawback is that it cannot adapt its height like a regular div tag. The textarea stubbornly showcases its scrollbar and maintains a fixed height. Therefore, sometimes, to enhance interactivity, we encounter difficulties when we want the text area to adapt its height. This is not impossible; for example, Google Buzz's input box is height adaptive to its content, as shown in the screenshot below:


Not to mention further, on the question and interaction page of my personal website, the answer input box (requires login):

After entering some text, the height of the text area automatically expands with the content:

However, these text areas achieve height adaptation through JavaScript scripts. In my personal site’s adaptive text box, it clones a hidden textarea, and through real-time text assignment, checks for scrollbars to determine if the height of the displayed text area dynamically increases. For those unfamiliar with JavaScript, this implementation is more troublesome than trying to ask a beauty out on a date.
Nonetheless, practically, if your requirements are not very high, there is a very simple implementation method that is suitable for all ages. This method is to use a regular div tag to simulate the textarea while taking advantage of the height adaptability of a div tag. Thus, the height adaptability effect of the textarea can be easily achieved.
2. Div Simulating textarea and Height Adaptation
I previously translated an article titled "28 HTML5 Features, Tips, and Techniques You Must Know," in which the attribute of a tag, contenteditable, was introduced in the “6. Content Editable” section. As the name suggests, this allows users to edit any text contained in the element, including child elements.
After applying this attribute, a normal div tag can also gain focus like a textarea, with a cursor flashing there, blinking and blinking; the more you look at it, the more it blinks. The input box of the web QQ 2.0 chat dialog uses this attribute.

//zxx: The Christmas theme interface of the penguin is very nice, and the visual effect is great; the snow effect is also very lovely, even the cup is excited.
This is easy to use, just add contenteditable="true" to a normal block element, like this:
True, even the quotes outside can be removed. The contenteditable attribute is part of HTML5, but it seems that IE has long supported this tag attribute. So, compatibility is not a major concern.
Okay, the most troublesome simulation of the editable textarea effect has been solved, and now achieving height adaptation using the div is as easy as loosening the soil for plants. Using the min-height property basically achieves this in one step. Considering that IE6 browsers disdain the min/max family, and combining the fact that its internal element overflow will expand the dimensions of the parent tag, for IE6 browsers, just set a fixed height. Thus, assuming we want to achieve a default height of 200 pixels with a height adaptable to the content, the following two styles are sufficient:

{ min-height: 200px; _height: 200px; }

Therefore, combining everything mentioned so far, we can easily use div to simulate the textarea and achieve height adaptation.
Here’s a test code —
CSS Code:

.test_box { width: 400px; min-height: 120px; max-height: 300px; _height: 120px; margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-size: 12px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; _overflow-y: visible; }

HTML Code:

The result is shown in the figure below (all screenshots taken from IE6):

Then randomly find an article from Sina Blog's homepage, copy some text and paste it in, the result is as shown below:

You can see that the editable tag has expanded its height accordingly. It’s all CSS, without messy JavaScript code. We can set a maximum height (max-height) so that a scrollbar appears when it exceeds, just as the demo page shows.
You can click here: div simulating textarea to achieve height adaptation demo

However, things won't go so smoothly; there are still many notes worth mentioning.
3. Some Notes and Clarifications
1. Modern browsers like Firefox will have a virtual box when the div in editable mode gains focus, while actually, textarea does not display any virtual borders. This sign will expose the div as a counterfeit, so it’s necessary to add the following style:
outline:0;
2. In Firefox, if the editable mode div has no internal elements, then when it gains focus, the cursor may be invisible or align with the outer div, which also will expose it as a textarea counterfeit. So, by default, we can add a solitary
line break tag in this div. However, in IE8, if there is a default br tag, the cursor position may flicker to the second line; thus, in IE8, by default, an editable div should not contain a br tag. Well, you can figure out how to clear it yourself.
3. In IE browsers (IE6~8), when pressing return while typing, a p tag will automatically be generated to encompass each line element within the div, while in other browsers, it seems to generate br tags (this hasn’t been fully tested, welcome corrections if there are discrepancies). Since the default p tag has a 1em margin value, to maintain a uniform effect, we can set styles to clear the margin values of p tags as follows:
.test_box p { margin: 0; }
4. The content typed in an editable mode div will be genuine HTML code, and if submitted as content, HTML character filtering is required. Additionally, if you copy content from another page into the editable div, the HTML will also be copied along with it (unlike textarea), making it necessary to have HTML character filtering (such as web QQ).

5. IE6 browser does not support the max-height property, so it is impossible to achieve the effect of having a scrollbar appear after exceeding a certain height using only CSS, requiring JS to cooperate.
6. Editable mode divs, like textareas, support focus and blur events, and naturally also support the focus pseudo-class; the external glow when modern browsers like Firefox focus on the demo page uses :focus.