Kaedah pelaksanaan projek untuk mengehadkan ketinggian div

Question

Saya mempunyai reka letak tiga lajur di mana lajur tengah mempunyai beberapa isu ketinggian. Secara umumnya, ia adalah aplikasi sembang. Nama kelas ialah: Untuk bekas yang mengandungi tiga lajur ini (saya memutuskan untuk menggunakan grid seperti ini untuk menjadikan lajur sama tinggi):

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

Lajur kiri dan kanan adalah kurang penting, tetapi perlu diperhatikan bahawa lajur kiri memaparkan senarai pengguna mungkin berbeza-beza (pengguna boleh ditapis). Lajur kanan mempunyai kandungan statik (dalam erti kata saiz

Lajur tengah:

position: relative;

Di ruangan tengah ini, saya mempunyai 3 div, yang kedua adalah sakit kepala

Div teratas (ketinggian ditetapkan);

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

Div bawah (ketinggian juga tetap)

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

Apabila pada mulanya dipaparkan, biasanya kandungan lajur kiri adalah yang paling tinggi dan bahagian bawah dijajarkan secara visual dengan kandungannya. Apabila menapis pengguna, bahagian bawah lajur tengah dijajarkan secara visual dengan bahagian bawah lajur kanan. Ini adalah perkara biasa. Masalah berlaku apabila mesej sembang muncul di div tengah di lajur tengah. Selagi mesej ini sedikit, ini tidak menjadi masalah, tetapi tidak lama kemudian div tengah menjadi sangat besar dan menonjol. Jadi lajur tengah menjadi lebih tinggi dan div bawah menjadi lebih rendah, yang memecahkan reka letak. Saya ingin div tengah lajur tengah mendapat bar skrolnya sendiri apabila ia mencapai ketinggian tertentu, dan tidak melebihi ketinggian itu, tetapi ini nampaknya sangat rumit.

Kini, div tengah digayakan seperti berikut:

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;

Tetapi ia tidak berfungsi, ketinggian kandungan meningkat dengan mesej baharu (walaupun bar skrol aktif dan beberapa kandungan berada "di belakang" bar skrol). Saya mengesyaki ini ada kaitan dengan bekas lajur yang tidak mempunyai ketinggian piksel tetap. Tetapi ia tidak boleh. Saya juga telah cuba menetapkan gaya lajur tengah kepada flex atau grid, tetapi semuanya berfungsi sama. Mungkin ia boleh diselesaikan dengan JS, tetapi saya lebih suka penyelesaian CSS yang ketat. Adakah anda mempunyai sebarang idea?

Answer 1

Menetapkan overflow-y: scroll pada

elemen dengan saiz besar tidak berguna. Sifat ini (overflow) menganggap ketinggian adalah lebih rendah daripada yang sebenarnya. Jadi untuk membetulkan kod anda, anda perlu membalut elemen overflow-y: scroll是无用的。这个属性(overflow)假设高度比实际要低。所以要修复你的代码，你需要用以下属性将那个

元素包装起来，比如：<div class="wrap">...<div> itu dengan atribut berikut, seperti: <div class="wrap">...<div>:

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

di mana var(--top-div-height)和var(--bottom-div-height) ialah ketinggian unsur

atas dan bawah.