Comment garder une division de discussion défilante bloquée en bas lorsque le conteneur externe est redimensionné ?

Div défilable pour coller vers le bas, lorsque la div externe change de taille

Problème :

Dans une interface d'application de chat, un div déroulant contenant des messages doit rester en bas du div externe, même si le div externe change dans taille. Par exemple, lorsque l'utilisateur ajuste la taille de la zone de saisie de texte, le message div doit rester en bas.

Solution :

1. Approche CSS :

Utilisez flex-direction : column-reverse ; pour la div externe. Cela inverse l'ordre des éléments dans le conteneur flexible, plaçant ainsi le message div en bas.

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

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

2. Approche JavaScript :

Si la solution CSS est incompatible avec certains navigateurs, vous pouvez utiliser JavaScript pour gérer le redimensionnement et le repositionnement du message 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

Supplémentaire Remarque :

Bien que la solution JavaScript soit plus flexible et gère mieux la compatibilité des navigateurs, elle nécessite de garder une trace des événements et de mettre à jour manuellement le hauteur du message div, ce qui peut introduire une surcharge de performances et être moins efficace que l'approche CSS dans certains scénarios.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!