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

我有一个包含4个div的div容器。其中有2个标题和2个内容div。点击标题将切换它们下方内容div的可见性。

我想考虑以下3种情况：

两个内容div都是打开的（可见的），并且有滚动条。在这种情况下，我希望它们都占据可用空间的一半。
1个内容div是打开的，有或没有滚动条。在这种情况下，我希望它占据所有可用空间或它所需的空间。
两个内容div都是关闭的。在这种情况下，我希望标题div位于容器顶部。

已实现的功能

如果两个div都有滚动条并且是打开的，可用空间将均匀分配。
如果一个关闭，另一个将填充可用空间。如果两个都关闭，只有标题将显示。

未实现的功能

当底部内容div关闭且顶部内容div有滚动条时，顶部内容div的高度将只增长到容器高度的一半。
当两个内容div都打开且没有滚动条时，它们将增长到容器高度的50%，并在内容div和下方的标题div之间创建空白间隔。

这是HTML的结构

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

这是我尝试应用的样式。请注意，我使用的是Sass。

.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;
  }
}

这是代码pen的链接。

我尝试过的事情

我还尝试使用max-heigth: calc(50% - 35px)（标题高度为35px），这解决了增长的内容div导致出现空白间隔的问题，但这也使得如果另一个内容div关闭，内容div将不会增长超过该高度。
仅使用flex-grow: 1而不使用flex-basis: calc(50% - 35px)和max-height: calc(50% - 35px)可以使内容div增长超过容器高度的约50%，但如果一个内容div具有更多元素，会导致内容div的高度不均匀，从而导致可用空间不均匀分配。

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