css设置textarea高度自适应不出现滚动条
时间: 2023-09-03 18:13:25 浏览: 158
Textarea根据内容自适应高度
要让`textarea`的高度自适应,且不出现滚动条,可以使用`max-height`属性和`box-sizing`属性。
以下是一个使用`max-height`属性和`box-sizing`属性实现`textarea`高度自适应的示例代码:
```html
<textarea id="myTextarea"></textarea>
```
```css
#myTextarea {
height: auto; /* 设置高度为自适应 */
max-height: 200px; /* 限制最大高度为200px */
padding: 10px; /* 设置内边距 */
box-sizing: border-box; /* 计算元素高度时包括内边距和边框 */
overflow-y: hidden; /* 隐藏垂直滚动条 */
}
```
在上面的示例中,我们将`textarea`的高度设置为自适应,且最大高度为200px,使用`padding`属性设置内边距,使用`box-sizing`属性将内边距和边框计算在元素的高度中,使用`overflow-y`属性隐藏垂直滚动条。
这样,在输入内容时,`textarea`的高度会自动调整,且不会出现滚动条。
阅读全文