如何在一個容器div中平均分配空間給兩個具有可切換可見度和不同內容的div？
P粉289775043
2023-08-17 21:56:47
<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>
這樣就可以實現你想要做的事情。你可以根據需要進行修改：
<!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>