Comment répartir l'espace de manière égale dans un conteneur div sur deux div avec une visibilité commutable et un contenu différent ?-Questions et réponses sur le réseau chinois PHP

<p>J'ai un conteneur div contenant 4 divs. Il contient 2 en-têtes et 2 divs de contenu. Cliquer sur les en-têtes fera basculer la visibilité des divs de contenu en dessous d'eux. </p> <p>J'aimerais considérer les 3 situations suivantes :</p> <ol> <li>Les deux divisions de contenu sont ouvertes (visibles) et disposent de barres de défilement. Dans ce cas, je veux qu’ils occupent tous les deux la moitié de l’espace disponible. ≪/li> <li>1 div de contenu est ouvert avec ou sans barres de défilement. Dans ce cas, je veux qu'il occupe tout l'espace disponible ou l'espace dont il a besoin. ≪/li> <li>Les deux divisions de contenu sont fermées. Dans ce cas, je veux que le titre div soit au-dessus du conteneur. ≪/li> </ol> <h3>Fonctionnalités implémentées</h3> <ul> <li>Si les deux div ont des barres de défilement et sont ouverts, l'espace disponible sera réparti uniformément. ≪/li> <li>Si l’un est fermé, l’autre remplira l’espace disponible. Si les deux sont désactivés, seul le titre sera affiché. ≪/li> </ul> <h3>Fonctionnalités non implémentées</h3> <ul> <li>Lorsque le div de contenu inférieur est fermé et que le div de contenu supérieur comporte des barres de défilement, la hauteur du div de contenu supérieur n'augmentera que jusqu'à la moitié de la hauteur du conteneur. ≪/li> <li>Lorsque les deux div de contenu sont ouverts sans barres de défilement, ils atteindront 50 % de la hauteur du conteneur et créeront un espace vide entre le div de contenu et le div de titre ci-dessous. ≪/li> </ul> <p>Voici la structure du HTML</p> <pre class="brush:php;toolbar:false;"><div class='flex-container'> <div id='header1' class='header'> En-tête 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'> En-tête 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>C'est le style que j'ai essayé d'appliquer. Veuillez noter que j'utilise Sass. </p> <pre class="brush:php;toolbar:false;">.flex-container { affichage : flexible ; direction flexible : colonne ; hauteur : 300px ; largeur : 150 px ; débordement-y : auto ; } .entête { affichage : flexible ; aligner les éléments : centre ; hauteur minimale : 35 px ; couleur d'arrière-plan : #99e9f2 ; curseur : pointeur ; } .header-content { base flexible : calc (50 % - 35 px ); croissance flexible : 1 ; débordement-y : auto ; affichage : flexible ; direction flexible : colonne ; .article { remplissage : 3px 12px ; couleur d'arrière-plan : #e3fafc ; } }</pré> <p>Voici le lien vers le stylo code. </p> <h3>Choses que j'ai essayées</h3> <ul> <li> J'ai également essayé d'utiliser <code>max-heigth: calc(50% - 35px)</code> (la hauteur du titre est de 35px), ce qui a résolu le problème de la croissance du contenu provoquant l'apparition d'espaces, mais cela fait également en sorte que si un autre div de contenu est fermé, le div de contenu ne dépassera pas cette hauteur. ≪/li> <li>Utilisez uniquement <code>flex-grow: 1</code> au lieu de <code>flex-basis: calc(50% - 35px)</code> calc(50% - 35px)</code> peut faire croître le div de contenu de plus d'environ 50 % de la hauteur du conteneur, mais si un div de contenu contient plus d'éléments, la hauteur du div de contenu sera inégale, ce qui entraînera dans un espace disponible inégal. Répartir uniformément. ≪/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>