Wie verteilt man den Platz in einem Container-Div gleichmäßig auf zwei Divs mit umschaltbarer Sichtbarkeit und unterschiedlichem Inhalt?-Fragen und Antworten zum chinesischen PHP-Netzwerk

<p>Ich habe einen Div-Container mit 4 Divs. Es enthält 2 Header und 2 Inhaltsdivs. Durch Klicken auf die Kopfzeilen wird die Sichtbarkeit der darunter liegenden Inhaltsbereiche umgeschaltet. </p> <p>Ich möchte die folgenden drei Situationen berücksichtigen:</p> <ol> <li>Beide Inhaltsbereiche sind geöffnet (sichtbar) und verfügen über Bildlaufleisten. In diesem Fall möchte ich, dass beide die Hälfte des verfügbaren Platzes einnehmen. </li> <li>1 Content-Div ist mit oder ohne Bildlaufleisten geöffnet. In diesem Fall möchte ich, dass es den gesamten verfügbaren Platz oder den Platz, den es benötigt, einnimmt. </li> <li>Beide Inhaltsdivs sind geschlossen. In diesem Fall möchte ich, dass sich das Titel-Div oben im Container befindet. </li> </ol> <h3>Implementierte Funktionen</h3> <ul> <li>Wenn beide Divs über Bildlaufleisten verfügen und geöffnet sind, wird der verfügbare Platz gleichmäßig verteilt. </li> <li>Wenn einer geschlossen ist, füllt der andere den verfügbaren Platz aus. Wenn beides ausgeschaltet ist, wird nur der Titel angezeigt. </li> </ul> <h3>Nicht implementierte Funktionen</h3> <ul> <li>Wenn das untere Inhalts-Div geschlossen ist und das obere Inhalts-Div über Bildlaufleisten verfügt, wächst die Höhe des oberen Inhalts-Div nur auf die halbe Höhe des Containers. </li> <li>Wenn beide Inhalts-Divs ohne Bildlaufleisten geöffnet sind, vergrößern sie sich auf 50 % der Höhe des Containers und erzeugen einen Leerraum zwischen dem Inhalts-Div und dem Titel-Div darunter. </li> </ul> <p>Dies ist die Struktur von HTML</p> <pre class="brush:php;toolbar:false;"><div class='flex-container'> <div id='header1' class='header'> Kopfzeile 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'> Kopfzeile 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>Das ist der Stil, den ich anwenden wollte. Bitte beachten Sie, dass ich Sass verwende. </p> <pre class="brush:php;toolbar:false;">.flex-container { Anzeige: Flex; Flexrichtung: Spalte; Höhe: 300px; Breite: 150px; Überlauf-y: auto; } .Header { Anzeige: Flex; align-items: center; Mindesthöhe: 35 Pixel; Hintergrundfarbe: #99e9f2; Cursor: Zeiger; } .header-content { Flexbasis: calc(50% - 35px); Flexwachstum: 1; Überlauf-y: auto; Anzeige: Flex; Flexrichtung: Spalte; .Artikel { Polsterung: 3px 12px; Hintergrundfarbe: #e3fafc; } }</pre> <p>Dies ist der Link zum Codestift. </p> <h3>Dinge, die ich ausprobiert habe</h3> <ul> <li> Ich habe auch versucht, <code>max-heigth: calc(50% - 35px)</code> (Titelhöhe ist 35px) zu verwenden, was das Problem der wachsenden Inhaltsbereiche löste, die zu Leerzeichenlücken führten Dies sorgt auch dafür, dass, wenn ein anderes Inhalts-Div geschlossen wird, das Inhalts-Div nicht über diese Höhe hinaus wächst. </li> <li>Verwenden Sie nur <code>flex-grow: 1</code> anstelle von <code>flex-basis: calc(50% - 35px)</code> calc(50% - 35px)</code> kann dazu führen, dass das Inhalts-Div um mehr als etwa 50 % der Containerhöhe wächst. Wenn ein Inhalts-Div jedoch mehr Elemente enthält, wird die Höhe des Inhalts-Divs ungleichmäßig bei unebenem Platzangebot gleichmäßig verteilen. </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>