NatChen

Once you have chosen the road of life, you have to be brave enough to go to the end and never look back.

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

textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应,使用普通的div标签模拟textarea文本域,同时又利用了div标签的高度自适应性。于是,textarea文本域的高度自适应效果就可以轻松实现。

.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;
}
<div class="test_box" contenteditable="true"><br /></div> 

 

posted @ 2017-12-14 16:25  NatChen  阅读(164)  评论(0编辑  收藏  举报