如何在一个容器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>