Bagaimana untuk mengagihkan ruang sama rata dalam satu div bekas kepada dua div dengan keterlihatan boleh tukar dan kandungan yang berbeza?-Soal Jawab Rangkaian PHP Cina

<p>Saya mempunyai bekas div yang mengandungi 4 div. Terdapat 2 tajuk dan 2 bahagian kandungan di dalamnya. Mengklik pada pengepala akan menogol keterlihatan div kandungan di bawahnya. </p> <p>Saya ingin mempertimbangkan 3 situasi berikut:</p> <ol> <li>Kedua-dua div kandungan terbuka (kelihatan) dan mempunyai bar skrol. Dalam kes ini saya mahu mereka berdua menduduki separuh daripada ruang yang ada. </li> <li>1 div kandungan dibuka dengan atau tanpa bar skrol. Dalam kes ini saya mahu ia mengambil semua ruang yang ada atau ruang yang diperlukannya. </li> <li>Kedua-dua div kandungan ditutup. Dalam kes ini saya mahu tajuk div berada di atas bekas. </li> </ol> <h3>Ciri yang dilaksanakan</h3> <ul> <li>Jika kedua-dua div mempunyai bar skrol dan terbuka, ruang yang tersedia akan diagihkan sama rata. </li> <li>Jika satu ditutup, satu lagi akan memenuhi ruang yang ada. Jika kedua-duanya dimatikan, hanya tajuk akan dipaparkan. </li> </ul> <h3>Ciri yang tidak dilaksanakan</h3> <ul> <li>Apabila div kandungan bawah ditutup dan div kandungan teratas mempunyai bar skrol, ketinggian div kandungan teratas hanya akan meningkat kepada separuh ketinggian bekas. </li> <li>Apabila kedua-dua div kandungan dibuka tanpa bar skrol, ia akan berkembang kepada 50% daripada ketinggian bekas dan mewujudkan ruang kosong antara div kandungan dan div tajuk di bawah. </li> </ul> <p>Ini ialah struktur HTML</p> <pre class="brush:php;toolbar:false;"><div class='flex-container'> <div id='header1' class='header'> Tajuk 1 </div> <div id='content1' class='header-content'> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> <div class='item'>Lorem</div> </div> <div id='header2' class='header'> Tajuk 2 </div> <div id='content2' class='header-content'> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> <div class='item'>Ipsum</div> </div> </div></pre> <p>Ini adalah gaya yang saya cuba gunakan. Sila ambil perhatian bahawa saya menggunakan Sass. </p> <pre class="brush:php;toolbar:false;">.flex-container { paparan: flex; flex-direction: lajur; ketinggian: 300px; lebar: 150px; limpahan-y: auto; } .kepala { paparan: flex; align-item: tengah; ketinggian min: 35px; warna latar belakang: #99e9f2; kursor: penunjuk; } .header-content { asas lentur: calc(50% - 35px); flex-grow: 1; limpahan-y: auto; paparan: flex; flex-direction: lajur; .item { padding: 3px 12px; warna latar belakang: #e3fafc; } }</pre> <p>Ini ialah pautan kepada pen kod. </p> <h3>Perkara yang saya telah cuba</h3> <ul> <li> Saya juga cuba menggunakan <code>max-hegth: calc(50% - 35px)</code> (tinggi tajuk ialah 35px), yang menyelesaikan masalah peningkatan div kandungan yang menyebabkan jurang ruang putih muncul, tetapi Ini juga menjadikannya supaya jika div kandungan lain ditutup, div kandungan tidak akan melepasi ketinggian itu. </li> <li>Hanya gunakan <code>flex-grow: 1</code> dan bukannya <code>flex-basis: calc(50% - 35px)</code> calc(50% - 35px)</code> boleh menjadikan div kandungan berkembang lebih daripada kira-kira 50% ketinggian bekas, tetapi jika div kandungan mempunyai lebih banyak elemen, ia akan menyebabkan div kandungan menjadi tidak sekata, mengakibatkan dalam ruang yang tersedia tidak rata. </li> </ul><p><br /></p>

<!DOCTYPE html> <html lang="en-us"> <head> <title>Variable Percentage Height</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *, *::before *::after { margin: 0; border: 0; padding: 0; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; text-align: justify; } html, body { height: 100%; } body { font-size: 14px; } body { color: #000000; font-family: 'Segoe UI', 'Lucida Grande', -apple-system, BlinkMacSystemFont, 'Liberation Sans', sans-serif; } </style> <style> #container { height: 100%; } .content { overflow: auto; background-color: #eec1ff; position: relative; } .content::after { position: absolute; inset: auto 0 0 0; display: block; z-index: 1; text-align: center; } #content1::after { content: 'this is the bottom of content div #1'; } #content2::after { content: 'this is the bottom of content div #2'; } .header { height: 35px; line-height: 35px; background-color: #99e9f2; cursor: pointer; } .item { padding: 3px 12px; background-color: #e3fafc; position: relative; z-index: 2; } </style> </head> <body> <div id="container"> <div class="header" id="header1">Header 1</div> <div class="content" id="content1"> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> <div class="item">Lorem</div> </div> <div class="header" id="header2">Header 2</div> <div class="content" id="content2"> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> <div class="item">Ipsum</div> </div> <script> (() => { const header1 = document.getElementById("header1"); const header2 = document.getElementById("header2"); const content1 = document.getElementById("content1"); const content2 = document.getElementById("content2"); let header1open = false; let header2open = false; header1.onclick = updateHeights; header2.onclick = updateHeights; updateHeights(null); /** * @param {MouseEvent} e */ function updateHeights(e) { const headerTotalHeight = header1.offsetHeight + header2.offsetHeight; if (e == null) { content1.style.display = "none"; content2.style.display = "none"; header1open = false; header2open = false; } else if (header1.contains(e.target)) { if (header1open) { header1open = false; content1.style.display = "none"; if (header2open) { content2.style.height = `calc(100% - ${headerTotalHeight}px)`; } } else { header1open = true; content1.style.removeProperty("display"); if (header2open) { content1.style.height = `calc((100% - ${headerTotalHeight}px) / 2)`; content2.style.height = `calc((100% - ${headerTotalHeight}px) / 2)`; } else { content1.style.height = `calc(100% - ${headerTotalHeight}px)`; } } } else if (header2.contains(e.target)) { if (header2open) { header2open = false; content2.style.display = "none"; if (header1open) { content1.style.height = `calc(100% - ${headerTotalHeight}px)`; } } else { header2open = true; content2.style.removeProperty("display"); if (header1open) { content1.style.height = `calc((100% - ${headerTotalHeight}px) / 2)`; content2.style.height = `calc((100% - ${headerTotalHeight}px) / 2)`; } else { content2.style.height = `calc(100% - ${headerTotalHeight}px)`; } } } } })(); </script> </div> </body> </html>