html - 具有两个可折叠左侧导航的三列布局

Question

快速概览

我目前正在处理一个页面，该页面总共有三列，从左到右依次是:

• 元素列表
• 代码详情
• 代码窗口

现在，Project List 和 Code Details 都有一个 max-width，每个 600px 但应该是 100% 在移动设备上，显示顺序为 Code Details -> Project List -> Code Window 和所有三个在桌面上时应该适合页面。这是一项乏味的任务，但我快完成了，我只是觉得我遗漏了什么。

此外，并不是说它与这篇文章完全相关，但我也在使用 Bootstrap 4，它可能会或可能不会影响解决方案的实现方式(目前我看不出原因，但包括这个以防万一).

---

问题

我需要默认折叠 Project List 和 Code Details 并且 Code Window 应该在折叠时全宽。然后，如果正在显示 Project List 或 Code Details，则 Code Window 应填充右侧的任何剩余空间。这类似于 Google 过去处理 their maps 的方式。 .

我尝试了几种方法，最接近的方法是为左边的两列创建一个容器，然后放入 Project List 和 Code Details在左侧容器中，代码窗口 的宽度为 100%。

我在左侧容器和元素列表和代码详细信息上使用float: left(在 child 身上使用它可能是一个问题，但删除它并没有解决问题)，以及 Code Widnow 上的 width: 100%。

html, body {
  height: 100%;
  overflow: hidden;
}
.main-content {
  display: flex;
  width: 100%;
}
.left-content {
  float: left;
}
.right-content {
  width: 100%;
  background-color: #5c7;
}
.project-list {
  max-width: 200px;
  float: left;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f33;
}
.code-details {
  max-width: 200px;
  float: left;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #37f;
}

<div class="main-content">
  <div class="left-content">
    <div class="project-list">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
    </div>
    <div class="code-details">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
    </div>
  </div>
  <div class="right-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
  </div>
</div>

使用此设置，左侧的列相互重叠，而不是在桌面上并排堆叠。我希望它们在移动设备上重叠，但在桌面设备上不重叠。您可以在上面的示例中清楚地看到这种效果。

---

问题

如何在从左侧堆叠 div 元素以在桌面上显示我的左侧面板时保留填充剩余宽度的功能并防止重叠？稍后我可以处理移动友好性问题，但我想我最终对这个问题有了狭隘的看法。

Answer 1

您可以通过在代码窗口元素上应用 flex-grow: 1 来实现这一点。如果您折叠元素列表、代码详细信息或两个代码窗口将占用剩余空间。

通过媒体查询，您可以删除 display: flex 和 max-width: 200px 移动属性，使它们成为全宽。

.main-content {
    display: flex;
}

.project-list {
    background-color: #FF3333;
    max-width: 200px;
}

.code-details {
    background-color: #3377FF;
    max-width: 200px;
}

.code-window {
    background-color: #55CC77;
    flex-grow: 1;
}

<div class="main-content">
    <div class="project-list">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
     </div>

    <div class="code-details">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
    </div>
    
    <div class="code-window">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
    </div>
</div>