div模拟textarea文本域轻松实现高度自适应

使用很简单，一个普通的block元素上加个contenteditable="true"就ok了，以下：

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

true外面的引号甚至去掉都不要紧。

contenteditable属性虽是HTML5里面的内容，可是IE彷佛老早就支持此标签属性了。因此，兼容性方面仍是不用太担忧的。

ok，最麻烦的模拟textarea的可编辑效果已经解决了，如今想要使用<div>实现高度自适应那就像是给花花草草松松土同样容易的。使用min-height属性基本上就一步到位了，考虑到IE6浏览器对min/max家族不屑一顾，结合其内部元素溢出会撑开父标签高宽的特性，IE6浏览器直接定高就能够了。因而，假设咱们要实现默认200像素高度，高度可随内容自适应的效果，直接下面两个样式就能够了：

{ min-height: 200px; _height: 200px; }

因而，把说到如今的内容结合一块儿，就可使用div模拟textarea文本域轻松实现高度自适应了。

 

固然，也是能够设置垂直方向和水平方向的滚动条

{
    overflow-x: hidden;    //水平方向禁止滚动
    overflow-y: auto;      //垂直方向能够滚动
}

 

以下测试代码——
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;
    _overflow-y: visible;
}

 

HTML代码：

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

 

结果以下图（所有截自IE6浏览器）：

 

一个简单demo

 

固然了，网上的大神们，为了实现这种效果也是操碎了心，还有不少黑科技写法，按需使用便可。附上张鑫旭大神的这篇文章： div模拟textarea文本域轻松实现高度自适应