textArea its height is dynamic

HTML & CSS
1 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dynamic textArea</title>
<body style="padding:10px">

textArea1
<textArea id="textArea1" style="width:100%;height:30px">
Tom live in New York. He is an American.
Chu live in Seoul. He is a Korean.
Paul live in Paris. He is a French.
</textArea>

textArea2
<textArea id="textArea2" style="width:100%;height:100px">
Tom live in New York. He is an American.
Chu live in Seoul. He is a Korean.
Paul live in Paris. He is a French.
</textArea>

textArea3
<textArea id="textArea3" style="width:100%;height:45px">
Tom live in New York. He is an American.
Chu live in Seoul. He is a Korean.
Paul live in Paris. He is a French.
</textArea>

textArea4
<textArea id="textArea4" style="width:100%;height:45px">
Tom live in New York. He is an American.
Chu live in Seoul. He is a Korean.
Paul live in Paris. He is a French.
Danaki live in Tokyo. He is a Japanese.
</textArea>

textArea5
<textArea id="textArea4" style="width:100%;height:58px">
Tom live in New York. He is an American.
Chu live in Seoul. He is a Korean.
Paul live in Paris. He is a French.
Danaki live in Tokyo. He is a Japanese.
</textArea>

trial textArea
<textArea id="trial textArea4" style="width:100%;height:100%">
Tom live in New York. He is an American.
Chu live in Seoul. He is a Korean.
Paul live in Paris. He is a French.
Danaki live in Tokyo. He is a Japanese.
</textArea>
</body>
<html>

I have the code above at the page of http://dot.kr/x-test/dynamicTextArea.php.

In textArea1, the height 30px is so small to contain 3 lines which is in textArea1.
so the last line is below the box of the textArea1.

In order to contains all 3 lines in the textArea,
I change the height from “30px” to “100px”. so the textArea contains all 3 lines in textArea2.
However it has empty space in the buttom of the box.

Although I set proper px as 45 px, so I can make it not too tall and not too small in textArea4 when it has 3 lines of text,
what if the text has 4 lines?
I should make the height 58px in textArea5 for make it contains all lines and has no empty space in the bottom of the box instead of set 45 px.

The following is one of the tials for it, but it seems not to work

[b]trial textArea[b]
<textArea id="trial textArea4" style="width:100%;[COLOR="#FF0000"]height:100%[/COLOR]">
Tom live in New York. He is an American.
Chu live in Seoul. He is a Korean.
Paul live in Paris. He is a French.
Danaki live in Tokyo. He is a Japanese.
</textArea>

Can I do it in CSS with your help? or should I go javascript forum of some other place for it?

How I can make the box always contains all text lines AND no empty space in the bottom of the box with your help?

2

Hi,

Louis has an interesting technique here for resizing textareas.

There is also a shorter method mentioned in the comments:

And there is an old article on Sitepoint:

http://www.sitepoint.com/build-auto-expanding-textarea-1/

You can’t do it with CSS alone I’m afraid.