Bagaimana untuk Mengekalkan Div Sembang Boleh Tatal Terjebak ke Bawah Apabila Bekas Luar Bersaiz Semula?

Div boleh tatal untuk melekat ke bawah, apabila div luar berubah saiz

Masalah:

Dalam antara muka aplikasi sembang, div boleh tatal yang mengandungi mesej harus melekat pada bahagian bawah div luar, walaupun jika perubahan div luar dalam saiz. Contohnya, apabila pengguna melaraskan saiz kawasan input teks, div mesej harus kekal di bahagian bawah.

Penyelesaian:

1. Pendekatan CSS:

Gunakan flex-direction: column-reverse; untuk div luar. Ini membalikkan susunan elemen dalam bekas fleksibel, dengan berkesan meletakkan div mesej di bahagian bawah.

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

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

2. Pendekatan JavaScript:

Jika penyelesaian CSS tidak serasi dengan penyemak imbas tertentu, anda boleh menggunakan JavaScript untuk mengendalikan saiz semula dan kedudukan semula div mesej:

// 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

Tambahan Nota:

Walaupun penyelesaian JavaScript lebih fleksibel dan mengendalikan keserasian penyemak imbas dengan lebih baik, ia memerlukan menjejaki peristiwa dan mengemas kini ketinggian div mesej secara manual, yang boleh memperkenalkan overhed prestasi dan kurang cekap daripada pendekatan CSS dalam senario tertentu.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Div Sembang Boleh Tatal Terjebak ke Bawah Apabila Bekas Luar Bersaiz Semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!