當外容器調整大小時,如何使可滾動聊天 Div 保持在底部?
當外部div 大小發生變化時,可滾動div 粘在底部
問題:
在聊天應用程式介面中,包含訊息的可捲動div 應該黏在外部div的底部,即使外部div 的大小改變。例如,當使用者調整文字輸入區域的大小時,訊息div應保持在底部。
解決方案:
1. CSS 方法:
使用flex-direction: column-reverse;
.outer-div { display: flex; flex-direction: column-reverse; } .message-div { flex: 1; overflow-y: scroll; }
登入後複製
2. JavaScript 方法:
// Resize function to adjust message div height function resizeMessageDiv() { const messageDiv = document.querySelector('.message-div'); messageDiv.style.height = calcMessageDivHeight(); } // Helper function to calculate the message div height function calcMessageDivHeight() { const outerDiv = document.querySelector('.outer-div'); return outerDiv.clientHeight - document.querySelector('.text-input').clientHeight; } // Event listener for text input changes document.querySelector('.text-input').addEventListener('input', resizeMessageDiv); window.addEventListener('load', resizeMessageDiv); // Initial resize on page load
登入後複製
其他注意:雖然JavaScript 解決方案更靈活並且可以更好地處理瀏覽器相容性,但它需要保留追蹤事件並手動更新訊息div 的高度,這可能會帶來效能開銷,並且在某些情況下比CSS 方法效率低。
以上是當外容器調整大小時,如何使可滾動聊天 Div 保持在底部?的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝?
2 週前
By DDD
Inzoi:如何申請學校和大學
3 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝?
2 週前
By DDD
Roblox:Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前
By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時,你可能會遇到一些令人困惑的現象,比如在開發者工具(d...

在元素個數不固定的情況下如何通過CSS選擇第一個指定類名的子元素在處理HTML結構時,常常會遇到元素個數不�...
