简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
How to distribute space equally in one container div to two divs with switchable visibility and different content?
P粉289775043
P粉289775043 2023-08-17 21:56:47
0
1
542
<p>I have a div container containing 4 divs. There are 2 headers and 2 content divs in it. Clicking on the headers will toggle the visibility of the content divs below them. </p> <p>I would like to consider the following 3 situations:</p> <ol> <li>Both content divs are open (visible) and have scrollbars. In this case I want them both to occupy half of the available space. </li> <li>1 content div is open with or without scrollbars. In this case I want it to take up all available space or the space it needs. </li> <li>Both content divs are closed. In this case I want the title div to be on top of the container. </li> </ol> <h3>Implemented features</h3> <ul> <li>If both divs have scrollbars and are open, the available space will be evenly distributed. </li> <li>If one is closed, the other will fill the available space. If both are off, only the title will be displayed. </li> </ul> <h3>Unimplemented features</h3> <ul> <li>When the bottom content div is closed and the top content div has scrollbars, the height of the top content div will only grow to half the height of the container. </li> <li>When both content divs are open without scrollbars, they will grow to 50% of the height of the container and create a blank space between the content div and the title div below. </li> </ul> <p>This is the structure of HTML</p> <pre class="brush:php;toolbar:false;"><div class='flex-container'> <div id='header1' class='header'> Header 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'> Header 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>This is the style I tried to apply. Please note that I'm using Sass. </p> <pre class="brush:php;toolbar:false;">.flex-container { display: flex; flex-direction: column; height: 300px; width: 150px; overflow-y: auto; } .header { display: flex; align-items: center; min-height: 35px; background-color: #99e9f2; cursor: pointer; } .header-content { flex-basis: calc(50% - 35px); flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; .item { padding: 3px 12px; background-color: #e3fafc; } }</pre> <p>This is the link to the code pen. </p> <h3>Things I’ve tried</h3> <ul> <li> I also tried using <code>max-heigth: calc(50% - 35px)</code> (title height is 35px), which solved the issue with the growing content div causing whitespace gaps to appear, but This also makes it so that if another content div is closed, the content div will not grow past that height. </li> <li>Only use <code>flex-grow: 1</code> instead of <code>flex-basis: calc(50% - 35px)</code> and <code>max-height : calc(50% - 35px)</code> can make the content div grow more than about 50% of the container height, but if a content div has more elements, it will cause the height of the content div to be uneven, resulting in uneven available space. Distribute evenly. </li> </ul><p><br /></p>
P粉289775043
P粉289775043

reply all(1)
P粉364129744
P粉3641297442023-08-18 10:40:53 1 floor

This way you can achieve what you want to do. You can modify it as needed: 

<!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>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！