关于html5高度自适应的信息

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.scrollHeighttext.offsetHeight){

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

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

}

})

相关问答

Q1: HTML5里面怎样自动适应手机屏幕的高度

用 CSS 的媒体查询器，例如：

@media screen and (min-height: 768px)

{

body { background-color: red; height: 200px; }

}

高度大雨 768px 时，body 添加一个红色背景

Q2: html5如何设定高度自适应？

代码如下：

var width = document.documentElement.clientWidth;

//初始化高度

$("#iFrame1").height(width*0.5);

//当文档窗口发生改变时 触发

$(window).resize(function(){

$("#iFrame1").height(width*0.5);

});

Q3: 急 html5 中自适应高度的DIV 怎么加纵向滚动条

CSS样式表里面添加overflow ：scroll；当内容超过设置的高度时自动生成纵向滚动条

Q4: 网页高度自适应

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleDocument/title

script src=""/script

style

*{padding:0; margin: 0; font-size: 12px;}

ul,li{list-style: none;}

.div1{width: 100%;}

.div2{width: 30%; background: orange; height: 300px; float: left;}

.div3{width: 70%; background: green; height: 300px; float: left;}

/style

/head

body

div class="div1"

div class="div2"30%/div

div class="div3"70%/div

/div

script

var cHeight=$(window).height();

$(".div3,.div2").height(cHeight);

/script

/body

/html

这样就可以自动获取屏幕的高度，然后再设置。

Q5: html5移动端div的高度怎么设置自适应

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

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