HTML网页中textarea的高度自适应怎么实现

html-css037

HTML网页中textarea的高度自适应怎么实现,第1张

HTML网页中textarea的高度自适应怎么实现方法:

方法步骤:

1、【实例名称】

textarea自适应文字行数

2、【实例描述】

textarea是HTML中的文本元素,可实现文字的多行输入,也可以控制行数和列数。本例学习如何让textarea根据用户的输人文本,自动调整高度和宽度。

3、【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>标题页</title>

</head>

<body>

<textarea rows=1 name=txt1 cols=27 

onpropertychange="this.style.posHeight=this.scrollHeight">

</textarea></body>

</html>

4、【运行效果】

5、【难点剖析】

本例的重点是texlarea元素的“onpropenychange”事件。当文本内容发生变化时会触发此事件。“posHeight”表示文本输入框的高度,“scmllHeight”表示内容的高度。

在文档流中,DIV的高度默认就是根据内容的高度自适应的。

如果是想适配不同设备的窗口大小,可以设置百分比。或者通过position定位,然后设置top和bottom值。再或者利用css3的flexbox布局,设置父级的display为flex,方向为纵的,然后设置其flex:1;

先设置html及body的CSS的高,分别为height:100%

如下:

html,body{height:100%margin:0px}

html{height:100%}

body{height:100%margin:0px}

后面的高为100%才有效:

<table height="100%">

<div style="height:100%">