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

作者: 大脸猫_2e21 | 来源:发表于2019-06-25 19:40 被阅读0次

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div模拟textarea文本域轻松实现高度自适应</title>
    <style>
    h2{
        text-align: center;
        margin:50px auto;
    }
    .test_box {
    width: 400px; 
    min-height: 20px; 
    max-height: 300px;
    _height: 120px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 3px; 
    outline: 0; 
    border: 1px solid #a0b3d6; 
    font-size: 12px; 
    line-height: 24px;
    padding: 2px;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;

    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
    </style>
</head>
<body>
    <h2>div模拟textarea文本域轻松实现高度自适应</h2>
    <div class="test_box" contenteditable="true"><br /></div>
</body>
</html>