我正在嘗試學習一些 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;
}
我嘗試使用位置屬性，但無法實作。我希望訊息框在訊息過多時不會被聊天容器推下。
當訊息太多時，我希望聊天容器完全不重疊訊息框并能夠在那里滾動。
有什么幫助嗎？
uj5u.com熱心網友回復：
設定max-height為.chat-container。您可以使用其他值代替500px. 使用它來找到與您的設計相匹配的值。
.chat-container {
max-height: 500px
overflow: scroll
}
更新
如果更改的高度.chat-container并且您想將輸入推到底部，請執行以下操作：
給
.chat-container包括html和的所有父級bodyheight: 100%。將
.chat-containerandform放在is和 its is的html元素中。flexflex-directioncolumn使用
flex-grow: 1on.chat-container以便它始終占用所有可用空間。
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.chat-container {
flex-grow: 1;
overflow: scroll;
}<div class="container">
<div class="chat-container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
</div>
<div class="message-box">
<Form onSubmit={ submit}>
<input ref={ message} />
<Button type="submit" class="mb-1 position-fixed">
Send
</Button>
</Form>
</div>
</div>可以調整高度form。
uj5u.com熱心網友回復：
我只是想為解決方案添加更多內容，因為以前的答案很差，因為每當視口發生變化時，500px 值都不起作用。在這個應用案例中，我們有：
- 帶有聊天訊息的容器，它應該是可滾動的并且應該有一個固定的高度。
- 具有輸入的容器將具有其余高度。
我想你正在設計一個像 WhatsApp Web 這樣的應用程式，所以你會有如下內容：
以下是該結構在 HTML 中的外觀：
<div class="chat-wrapper">
<div class="chat-messages">
<div class="message left">Some text</div>
<div class="message left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla sem, placerat a est eu, interdum consectetur ipsum. Sed sed libero ac mauris scelerisque convallis et eget elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel iaculis purus. Nunc placerat nisi sapien, id facilisis sapien faucibus sit amet. Vestibulum felis eros, fermentum quis augue eu, vehicula dapibus nisi. Suspendisse potenti.</div>
<div class="message right">Some text</div>
<div class="message right">Some text</div>
<div class="message left">Some text</div>
<div class="message right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla sem, placerat a est eu, interdum consectetur ipsum. Sed sed libero ac mauris scelerisque convallis et eget elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel iaculis purus. Nunc placerat nisi sapien, id facilisis sapien faucibus sit amet. Vestibulum felis eros, fermentum quis augue eu, vehicula dapibus nisi. Suspendisse potenti.</div>
<div class="message left">Some text</div>
<div class="message right">Some text</div>
<div class="message right">Some text</div>
<div class="message left">Some text</div>
</div>
<div class="chat-input">
<input name="message" class="chat-input" />
</div>
</div>
現在，視窗高度將是100%高度的 ，與 相同100vh。從這里，您可以創建一個父容器，其高度將是整個視口：
.chat-wrapper {
height: 100vh;
width: 50%;
margin: auto;
}
聊天包裝器將是div訊息容器的父類。然后，我們將定義另外兩個類，它們將是div訊息的容器和它input本身：
/* Container for the message */
.chat-messages {
padding: 16px 36px 0;
min-height: calc(100% - 75px);
max-height: calc(100% - 75px);
overflow: auto;
}
/* Container for the input */
.chat-input {
background-color: #efefef;
min-height: 75px;
max-height: 75px;
display: flex;
justify-content: flex-left;
align-items: center;
padding: 0 32px;
}
這里的訣竅是我們如何計算height訊息的數量。如您所見，我們使用的100%是高度，但我們也減去height了輸入容器的固定值。因此，訊息容器將始終將輸入容器推到底部，而不會將其從實際視口中移除。另外，我們添加了overflow: auto道具，這將允許在容器內滾動。
最后，我們可以將其他樣式類添加到其他欄位中。
/* Default styling for the messages */
.message {
padding: 8px;
border-radius: 8px;
width: fit-content;
max-width: 65%;
margin-bottom: 8px;
border: 1px solid #dedede;
}
/* Default styling for the right messages */
/* You could also modify the styled for the left messages with the left class */
.message.right {
background-color: #dcf8c6;
margin-left: auto;
}
.chat-input {
padding: 8px;
width: 100%;
height: 65%;
border-radius: 8px;
outline: none;
border: none;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496889.html
上一篇：隱藏標簽邊框
下一篇：如何用css制作縮放和變灰影片？