首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

div模拟textarea以兑现高度自适应实例页面

2012-11-06 
div模拟textarea以实现高度自适应实例页面使用很简单,一个普通的block元素上加个contenteditabletrue就

div模拟textarea以实现高度自适应实例页面

使用很简单,一个普通的block元素上加个contenteditable="true"就ok了,如下:

<div contenteditable="true"></div>

true外面的引号甚至去掉都没关系。

contenteditable属性虽是HTML5里面的内容,但是IE似乎老早就支持此标签属性了。所以,兼容性方面还是不用太担心的。

ok,最麻烦的模拟textarea的可编辑效果已经解决了,现在想要使用div实现高度自适应那就像是给花花草草松松土一样容易的。使用min- height属性基本上就一步到位了,考虑到IE6浏览器对min/max家族不屑一顾,结合其内部元素溢出会撑开父标签高宽的特性,IE6浏览器直接定高就可以了。

?

代码
CSS代码:

.test_box {
??? width: 400px;
??? min-height: 120px;
??? max-height: 300px;
??? _height: 120px;
??? margin-left: auto;
??? margin-right: auto;
??? padding: 3px;
??? outline: 0;
??? border: 1px solid #a0b3d6;
??? font-size: 12px;
??? word-wrap: break-word;
??? overflow-x: hidden;
??? overflow-y: auto;
}

HTML代码:

<div contenteditable="true"><br /></div>

热点排行