我正在努力学习一些React和CSS，但有一件事我很挣扎.
我试图创建一个聊天页面，但当有许多消息时，消息容器会向下推输入框.
const message = useRef()
function submit(e) {
e.preventDefault();
addMessage(msgBox => [...msgBox , message.current.value])
}
const [msgBox, addMessage] = useState(["John: Hi"])
return (
<>
<div className = "chat-container">
{msgBox.map((msg) => {
return <div><span>{msg}</span><br/></div>
})}
</div>
<div className = "message-box">
<Form onSubmit = {submit}>
<input ref = {message} />
<Button type = "submit" className = "mb-1 position-fixed">
Send
</Button>
</Form>
</div>
</>
)
CSS:
* {
margin: 0;
padding: 0;
}
.chat-container {
min-height: 90vh;
min-width: 80%;
position: relative;
}
span {
padding: 60px;
}
.message-box {
min-height: 10vh;
position: absolute;
}
.message-box > form > input {
margin-left: 60px;
}
我试图摆弄位置属性，但我没能做到.当有太多消息时，我希望聊天容器不要按下消息框.
我希望当有太多的消息时，聊天容器不要在所有消息框中重叠，并且能够滚动到那里.
有什么帮助吗？