简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首页
文章
问答
课程
专题
下载
手游
词典
最近更新

首页  >  问答  >  正文

如何在一个容器div中平均分配空间给两个具有可切换可见性和不同内容的div？

<p>我有一个包含4个div的div容器。其中有2个标题和2个内容div。点击标题将切换它们下方内容div的可见性。</p> <p>我想考虑以下3种情况：</p> <ol> <li>两个内容div都是打开的（可见的），并且有滚动条。在这种情况下，我希望它们都占据可用空间的一半。</li> <li>1个内容div是打开的，有或没有滚动条。在这种情况下，我希望它占据所有可用空间或它所需的空间。</li> <li>两个内容div都是关闭的。在这种情况下，我希望标题div位于容器顶部。</li> </ol> <h3>已实现的功能</h3> <ul> <li>如果两个div都有滚动条并且是打开的，可用空间将均匀分配。</li> <li>如果一个关闭，另一个将填充可用空间。如果两个都关闭，只有标题将显示。</li> </ul> <h3>未实现的功能</h3> <ul> <li>当底部内容div关闭且顶部内容div有滚动条时，顶部内容div的高度将只增长到容器高度的一半。</li> <li>当两个内容div都打开且没有滚动条时，它们将增长到容器高度的50%，并在内容div和下方的标题div之间创建空白间隔。</li> </ul> <p>这是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>这是我尝试应用的样式。请注意，我使用的是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>这是代码pen的链接。</p> <h3>我尝试过的事情</h3> <ul> <li>我还尝试使用<code>max-heigth: calc(50% - 35px)</code>（标题高度为35px），这解决了增长的内容div导致出现空白间隔的问题，但这也使得如果另一个内容div关闭，内容div将不会增长超过该高度。</li> <li>仅使用<code>flex-grow: 1</code>而不使用<code>flex-basis: calc(50% - 35px)</code>和<code>max-height: calc(50% - 35px)</code>可以使内容div增长超过容器高度的约50%，但如果一个内容div具有更多元素，会导致内容div的高度不均匀，从而导致可用空间不均匀分配。</li> </ul><p><br /></p>
P粉289775043P粉289775043407 天前547

全部回复(1)我来回复

  • P粉364129744

    P粉3641297442023-08-18 10:40:53

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

    <!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>

    回复
    0
  • 取消回复