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

一、使用textarea标签进行多行文本的输入有很多限制，比如不能实现高度自适应，会出现难看的滚动条等问题。

HTML5中添加了一个新属性contenteditable，该属性可以让input,textarea以外的不可编辑的标签具备可编辑功能；

用法如下：

//contenteditable="true"当属性值为true的时候，可编辑标签内可以写入标签，对于复制的具有样式的内容，其样式会保留；

<div contenteditable="true">我是可编辑的富文本框</div>

//contenteditable="plaintext-only"当属性值为plaintext-only时，该可编辑标签内只能写入纯文本的数据，对于复制的具有样式的内容，会转换为纯文本，而将样式标签等内容过滤掉；

<div contenteditable="plaintext-only"></div>

二、如果不使用该属性，可以使用js控制textarea的高度；原理是当textarea出现滚动条时，增加其高度，使滚动条消失。

怎样判断是否出现滚动条，其方法是但元素的scrollHeight大于offsetHeight的时候，即出现了滚动条；

实现方法如下：

//html

<textarea id="text"></textarea>

//css

#text{

font-size: 20px

overflow: hidden//必须

}

//js

$('#text').on('input',function(){

if(text.scrollHeight>text.offsetHeight){

THeight += 20//font-size的大小是20，因此每次给textarea的高度增加20px

$('#text').css('height',THeight)

}

})

父域自适应子域么？

假设自适应高度

子域定义postMessage事件

var height = document.body.offsetHeight

window.parent.postMessage(height, '*')

父域监听

window.addEventListener("message", function() {

var height = message.data//子域的height

//and so on....可以做自己想做的事情了

}, false)

希望可以帮到你

在CSS里添加媒体查询，查询屏幕宽度的大小。具体语句比如<link rel="stylesheet" media="screen and (min-width:980px) and (max-width:2048px)" href="CSS/min980px.css" />，这里就是查询最新屏幕宽度980px最大屏幕宽度2046px的时候，加载"CSS/min980px.css"这个CSS文件，min980px.css文件里要用百分比的方式来布局，这样布局就自适应了，另外字体的大小也要用自适应才行，如大小用em做单位。当布局缩小时，布局也有相应的改变，如隐藏一些不大重要的内容。最好就是找一些响应式网页设计的书籍看看，多看多练。

---