如何將可捲動 Div 固定在可調整大小的外部 Div 的底部？

當外部div 大小改變時，可捲動div 黏在底部

在聊天應用程式中，通常在另一個包含以下內容的div 中有一個可捲動div對話歷史記錄。當外部 div 大小發生變化時，例如底部的輸入欄位增大或縮小時，可捲動 div 應保持其在對話底部的位置。

使用 CSS 的解決方案

使用flex-direction：column-reverse；屬性位於外部 div 上，您無需任何 JavaScript 即可實現此行為。這個屬性本質上翻轉了子元素的順序，將可滾動的div放在底部。

但是，這個解決方案有一個缺點：它可能會導致滾動條消失某些瀏覽器，如 Firefox、IE 和 Edge。

隱藏捲軸的解決方案

修復對於隱藏滾動條問題，您可以添加以下CSS：

這有效地在第一個可滾動div內建立第二個可捲動div，確保捲軸保持可見。

實作細節

在上面的腳本中，resizeInput()函數檢查捲軸是否位於可捲動div的底部並調整滾動位置如果需要的話。

以上是如何將可捲動 Div 固定在可調整大小的外部 Div 的底部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！