时间戳

首页 > 解决方案 > 应用溢出滚动时文本区域高度增加

css - 应用溢出滚动时文本区域高度增加

问题描述

我有一个 html textarea 输入和一个 div 直接在它下面。每当我将溢出设置为滚动到 textarea 时，高度都会增加 textarea 和标签之间的距离，从而增加太多空间。无论如何，有没有办法防止高度增加，并且仍然在文本区域下方紧邻 div 溢出？

import React from 'react';
import styled from 'styled-components';

 const CommentField = styled.textarea`
      background: transparent;
      border: none;
      outline: none;
      padding: 0px;
      overflow: scroll;
      resize: none;
    `;

 const Comment = () => {
    
       return( <CommentField
                id="comment"
                name="comment
                placeholder="Add your comment here"
                cols={30}
                rows={1}
              /> 
            <div>date / time </div> )

}

export default Comment;

标签： cssreactjsstyled-components

解决方案

你可以试试这个：

textarea {
  resize: none;
}

让我们知道这是否是所需的答案。

OP 尝试了上面提出的编辑解决方案，但没有任何改进。

您可能希望使用所需的值设置一个固定高度，例如： 然后您应该定义一个高度和最大高度以将其固定为所需的值。像这样：

textarea{
  background: transparent;
      border: none;
      outline: none;
      padding: 0px;
      overflow: scroll;
      resize: none;
  height:20vh;
  max-height:20vh;
  
}

请注意，您还可以隐藏滚动条以获得更好的视觉效果。

推荐阅读