Projektimplementierungsmethode zur Begrenzung der Div-Höhe

Question

Ich habe ein dreispaltiges Layout, bei dem die mittlere Spalte einige Probleme mit der Höhe hat. Im Allgemeinen handelt es sich um eine Chat-Anwendung. Der Klassenname lautet: Für einen Container, der diese drei Spalten enthält (ich habe mich für ein Raster wie dieses entschieden, um die Spalten auf die gleiche Höhe zu bringen):

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

Die linke und rechte Spalte sind weniger wichtig, es muss jedoch beachtet werden, dass in der linken Spalte die Liste der Benutzer angezeigt wird; die Länge der Liste kann variieren (Benutzer können gefiltert werden). Die rechte Spalte hat statischen Inhalt (im Sinne der Größe);

Mittlere Spalte:

position: relative;

In dieser mittleren Spalte habe ich 3 Divs, von denen der zweite Kopfschmerzen bereitet

Top div (Höhe ist festgelegt);

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

Unterer Bereich (Höhe ist ebenfalls festgelegt)

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

Beim ersten Rendern ist normalerweise der Inhalt der linken Spalte am höchsten und der untere Bereich wird optisch an seinen Inhalt angepasst. Beim Filtern von Benutzern wird das untere Div der mittleren Spalte optisch am unteren Abschnitt der rechten Spalte ausgerichtet. Das ist völlig normal. Das Problem tritt auf, wenn die Chat-Nachricht im mittleren Div in der mittleren Spalte angezeigt wird. Solange es nur wenige Nachrichten gibt, ist das kein Problem, aber bald wird das mittlere Div sehr groß und ragt hervor. Dadurch wird die mittlere Spalte höher und das untere Div niedriger, wodurch das Layout unterbrochen wird. Ich möchte, dass das mittlere Div der mittleren Spalte eine eigene Bildlaufleiste erhält, wenn es eine bestimmte Höhe erreicht und diese Höhe nicht überschreitet, aber das scheint sehr kompliziert zu sein.

Jetzt ist der mittlere Bereich wie folgt gestaltet:

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;

Aber es funktioniert nicht, die Höhe des Inhalts erhöht sich mit neuen Nachrichten (obwohl die Bildlaufleiste aktiv ist und sich einige Inhalte „hinter“ der Bildlaufleiste befinden). Ich vermute, dass dies etwas damit zu tun hat, dass der Container der Spalte keine feste Pixelhöhe hat. Aber es kann nicht. Ich habe auch versucht, den Stil der mittleren Spalte auf „Flex“ oder „Raster“ einzustellen, aber es funktioniert alles gleich. Vielleicht kann es mit JS gelöst werden, aber ich würde eine strikte CSS-Lösung bevorzugen. Hast du eine Idee?

Answer 1

给具有大尺寸的

元素设置overflow-y: scroll是无用的。这个属性(overflow)假设高度比实际要低。所以要修复你的代码，你需要用以下属性将那个

元素包装起来，比如：<div class="wrap">...<div>：

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

其中var(--top-div-height)和var(--bottom-div-height)是顶部和底部

元素的高度。