The textarea sets the width and height through cols and rows; you can also use style to set the width and height, respectively:
1. Set the width to 100%, and the width of the textarea changes with the parent element;
2. When rows are set, the height of the textarea will change, no longer just one line;
The following is the demo html, reproduced from: http://blog.csdn.net/domingoluis/article/details/6676331
<HTML>
<HEAD>
<TITLE>Textarea width, height automatic adaptation processing method</TITLE>
<!-- Automatic adaptation of control width -->
<style type="text/css">
.comments {
width:100%;/*Automatically adapt to the width of the parent layout*/
overflow:auto;
word-break:break-all;
/* Solve the line breaking problem in ie (to prevent it from automatically becoming displayed on one line, mainly to solve the ie compatibility problem. In ie8, when the width is set to 100%, when the class content of the text field exceeds one line,
When we double-click the text content, it will automatically become a line of display, so we can only use ie's proprietary line-breaking property "word-break or word-wrap" to control its line breaking)*/
}
</style>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION= " ">
<!-- Automatic adaptation of the main control height-->
<!-- The first one is a normal textarea -->
<textarea class="comments" rows="10" cols="10"> </textarea>
<!-- The following two ways can solve the textarea line height automatically adapt to the height of the class content -->
<textarea class="comments" rows=1 name=s1 cols=27 onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea>
<textarea class="comments" style="height:expression((this.scrollHeight>150)?'150px':(this.scrollHeight+5)+'px');overflow:auto;"></textarea>
</FORM>
</BODY>
</HTML>