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

Question

我有一个 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;

Answer 1

你可以试试这个：

textarea {
  resize: none;
}

如果这是我们想要的答案，请告诉我们。

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

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

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

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