外側のコンテナのサイズが変更されたときに、スクロール可能なチャット Div を一番下に固定したままにする方法は?

外側の div のサイズが変わったときにスクロール可能な div を一番下に固定します

問題:

チャット アプリケーション インターフェイスでは、メッセージを含むスクロール可能な div は、たとえ外側の div のサイズが変わります。たとえば、ユーザーがテキスト入力領域のサイズを調整するとき、メッセージ div は下部に残る必要があります。

解決策:

1. CSS アプローチ:

フレックス方向: 列反転を使用します。外側の div の場合。これにより、フレックス コンテナ内の要素の順序が逆になり、メッセージ div が効果的に一番下に配置されます。

.outer-div {
  display: flex;
  flex-direction: column-reverse;
}

.message-div {
  flex: 1;
  overflow-y: scroll;
}

2. JavaScript アプローチ:

CSS ソリューションが特定のブラウザーと互換性がない場合は、JavaScript を使用してメッセージ div のサイズ変更と位置変更を処理できます:

// 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 中国語 Web サイトの他の関連記事を参照してください。