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

Question

我有一个html textarea输入和一个div直接在它的下面。每当我设置overflow来滚动到文本区域时，高度增加了文本区域和标签之间的距离，从而增加了太多的空间。是否有办法防止高度增加，仍然有溢出与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尝试了上述解决方案，但没有任何改善。

你可能想要设置一个固定的高度与所需的值，如:然后，您应该定义一个高度和max-height来将其固定到所需的值。像这样:

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

} 

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