div模拟textarea自适应高度_html/css

　　之前在公司做项目的时候，有这么一个需求，要我写一个评论框，可以随着评论的行数增加而自动扩大，最开始我想用textarea实现，但是后来尝试后发现textarea并不适合，textarea的高度不会随着输入行数的增多而增大，于是我上网寻求了下帮助，发现大神张鑫旭的这篇文章《div模拟textarea文本域轻松实现高度自适应》,成功解决我的问题

代码如下：

 1  1  2  2  3  3  4  4      5  5     div模拟textarea自适应高度le> 6  6     <style type="text/css"> 7  7         .test_box{ 8  8             width:500px; 9  9             min-height:200px;10 10             max-height:600px;11 11             _height:200px;/*兼容IE6浏览器*/12 12             margin:0 auto;13 13             padding:3px;14 14             outline:0;15 15             border:1px solid #e4e4e4;16 16             font-size:12px;17 17             word-wrap:break-word;/*用于英文文本自动换行，所有主流浏览器支持*/18 18             overflow-x:hidden;19 19             overflow-y:auto;20 20             -webkit-user-modify: read-write-plaintext-only;21 21         }22 22     </style>23 23 </head>24 24 <body>25 25     <div class="test_box" contenteditable="true">我是模拟textarea的div</div>26 26     <script type="text/javascript">27 27         if (typeof document.webkitHidden == "undefined") {28 28             // 非chrome浏览器阻止粘贴29 29             box.onpaste = function() {30 30                 return false;31 31             }32 32         }33 33     </ script>34 34 </body>35 35 </html></script></pre>    </p>    <p>其中有一两个从没见过的属性：</p>    <li>-webkit-user-modify: read-only | read-write | read-write-plaintext-only<br />     <table>            <tr>       read-only       <td>内容只读。</td>      </tr>      <tr>       read-write       <td>内容可读写。</td>      </tr>      <tr>       read-write-plaintext-only       <td>内容可读写，但粘贴内容中的富文本格式（如文本的颜色、大小，图片等）会丢失。内容类似于以纯文本显示。</td>      </tr>      </table></li>    <li> contenteditable 属性规定是否可编辑元素的内容。<br />     <table>            <tr>       true       <td>规定可以编辑元素内容。</td>      </tr>      <tr>       false       <td>规定无法编辑元素内容。</td>      </tr>      </table></li>    <p>　　</p>    <p> 　　再次感谢鑫大神（http://www.zhangxinxu.com/），分享了好多非常实用的经验，等将来能达到他那种高度，我也想写出好博客分享出来造福人类，哈哈，虽然还很遥远，继续fighting~  </div>

  </div>

<script type="text/javascript" src="/layui/layui.js"></script>
<script>
layui.use('code', function(){
  
layui.code({
  elem: 'pre', //默认值为.layui-code
  about:false,
  title:'div模拟textarea自适应高度_html/css_WEB-ITnose代码块',
  encode: true //是否转义html标签。默认不开启
});
});
</script>
<footer class="comm-footer">
           <ul class="channels">
              <li>
                <a target="_top" href="/system/">操作系统</a>
            </li><li>
                <a target="_top" href="/down/">程序下载</a>
            </li><li>
                <a target="_top" href="/jquery/">jquery插件库</a>
            </li><li>
                <a target="_top" href="/jiaoben/">编程</a>
            </li><li>
                <a target="_top" href="/db/">数据库</a>
            </li><li>
                <a target="_top" href="/tools/">在线工具</a>
            </li><li>
                <a target="_top" href="/framebook/">框架书籍</a>
            </li><li>
                <a target="_top" href="/xitongjiaocheng/">系统教程</a>
            </li><li>
                <a target="_top" href="/ruanjianxiazai/">软件下载</a>
            </li>            </ul>
            <ul class="versions">
            <li>
                <a href="https://m.gxlcms.com" class="active">触屏版</a>
            </li>

            <li>
                <a href="https://www.gxlcms.com" target="_top">电脑版</a>
            </li>
            </ul>
           
              
     
        <p><a href="https://beian.miit.gov.cn/" target="_blank"  style="color:#ffffff"></a><script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script></p>
        </footer>	

</body>
</html>