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%">