搜尋

首頁  >  問答  >  主體

如何在一個容器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粉289775043471 天前599

全部回覆(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
  • 取消回覆