Méthode de mise en œuvre du projet pour limiter la hauteur des divs

Question

J'ai une disposition à trois colonnes où la colonne du milieu présente des problèmes de hauteur. De manière générale, il s'agit d'une application de chat. Le nom de la classe est : Pour un conteneur contenant ces trois colonnes (j'ai décidé d'utiliser une grille comme celle-ci pour que les colonnes soient de même hauteur) :

display: grid;
    grid-template-columns: 360px auto 300px;
    grid-auto-rows: 1fr;

Les colonnes de gauche et de droite sont moins importantes, mais il faut noter que la colonne de gauche affiche la liste des utilisateurs ; la longueur de la liste peut varier (les utilisateurs peuvent être filtrés). La colonne de droite a un contenu statique (au sens de taille) ;

Colonne du milieu :

position: relative;

Dans cette colonne du milieu, j'ai 3 divs dont le deuxième est un casse-tête

Top div (la hauteur est fixe);

height: calc(
            var(--users-search-height) + (var(--users-search-wrapper-height) - var(--users-search-height)) / 2
        );

Bottom Div (la hauteur est également fixe)

height: var(--users-search-wrapper-height);
       
        bottom: 0;

Lors du rendu initial, le contenu de la colonne de gauche est généralement le plus élevé et le div inférieur est visuellement aligné avec son contenu. Lors du filtrage des utilisateurs, la division inférieure de la colonne du milieu est visuellement alignée avec la section inférieure de la colonne de droite. C'est tout à fait normal. Le problème se produit lorsque le message de discussion apparaît dans le div du milieu dans la colonne du milieu. Tant que ces messages sont peu nombreux, ce n'est pas un problème, mais bientôt la division du milieu devient très grande et dépasse. Ainsi, la colonne du milieu devient plus haute et la division inférieure devient plus basse, ce qui brise la mise en page. J'aimerais que le div central de la colonne du milieu ait sa propre barre de défilement lorsqu'il atteint une hauteur spécifique, et ne dépasse pas cette hauteur, mais cela semble très compliqué.

Maintenant, la division du milieu est stylisée comme suit :

max-height: calc(
            100% - var(--users-search-wrapper-height) -
                (var(--users-search-height) + (var(--users-search-wrapper-height) - var(--users-search-height)) / 2)
        );

        height: as above;

        overflow-y: scroll;

Mais ça ne marche pas, la hauteur du contenu augmente avec les nouveaux messages (même si la barre de défilement est active et que certains contenus se trouvent "derrière" la barre de défilement). Je soupçonne que cela a quelque chose à voir avec le fait que le conteneur de la colonne n'a pas de hauteur de pixel fixe. Mais ce n’est pas possible. J'ai également essayé de définir le style de la colonne du milieu sur flex ou grille, mais tout fonctionne de la même manière. Peut-être que cela peut être résolu avec JS, mais je préférerais une solution CSS stricte. As tu des idées?

Answer 1

Définir overflow-y: scroll sur

éléments de grande taille est inutile. Cette propriété (overflow) suppose que la hauteur est inférieure à ce qu'elle est réellement. Donc, pour corriger votre code, vous devez envelopper cet élément overflow-y: scroll是无用的。这个属性(overflow)假设高度比实际要低。所以要修复你的代码，你需要用以下属性将那个

元素包装起来，比如：<div class="wrap">...<div> avec l'attribut suivant, comme : <div class="wrap">...<div> :

.wrap {
 height: calc(100vh - var(--top-div-height) - var(--bottom-div-height));
 overflow-y: scroll;
}

où var(--top-div-height)和var(--bottom-div-height) est la hauteur des éléments supérieur et inférieur

.