简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Wie verteilt man den Platz in einem Container-Div gleichmäßig auf zwei Divs mit umschaltbarer Sichtbarkeit und unterschiedlichem Inhalt?
P粉289775043
P粉289775043 2023-08-17 21:56:47
0
1
546
<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>
P粉289775043
P粉289775043

Antworte allen(1)
P粉364129744
P粉3641297442023-08-18 10:40:53 1 Etage

这样就可以实现你想要做的事情。你可以根据需要进行修改：

<!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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！