如何制作带有全角 visjs 的 flexbox 布局（2 行 - （2 列和 1 列））？答案

【问题标题】：How can I make a flexbox layout (2 rows - (2 columns & 1 column) ) with a full-width visjs inside?如何制作带有全角 visjs 的 flexbox 布局（2 行 - （2 列和 1 列））？
【发布时间】：2020-07-04 10:24:51
【问题描述】：

我正在创建一个包含三个框的布局 - 两个水平连接，一个位于它们下方。我的目标是拥有一个灵活的布局，以便所有内容都成比例并适合所使用的屏幕大小（无滚动）。最大的较低的盒子将有一个画布（visjs - 应该适合 100% 的宽度）。

左侧框的高度由里面的内容控制，宽度是行的百分比。

底框应该填满剩余的高度。

所有框都应该填满页面的屏幕（换句话说，没有滚动选项）。

 --------------
| L% |    R    |
 --------------
|              |
|    CANVAS    |
|    vis.js    |
|              |
 --------------

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
感谢您的 cmets。我整天都在尝试解决这个问题，但没有成功。我不会发布我的垃圾代码。我希望有人可以提供一个“好的”答案来解决这个问题，并且将来如果有人需要类似的东西，他/她可以找到解决方案。

标签： html css layout vis.js

【解决方案1】：

使用嵌套的flex-boxes。

html {
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  background: #eee;
  display: flex;
  flex-flow: column nowrap;
}

header {
  display: flex;
}

header .top-left {
  background-color: rgba(255,0,0,0.2);
  flex-basis: 20%;
}

header .top-right {
  background-color: rgba(0,255,0,0.2);
  flex: 1;
}

main {
  background-color: rgba(0,0,255,0.2);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator {
  line-height: 1;
  text-align: center;
  font-size: 2rem;
  color: #666;
  margin: 1rem;
  padding: 1rem 2rem;
  border: 1px solid #aaa;
}

<header>
  <div class="top-left">
    <p class="indicator">L_20%</p>
  </div>
  <div class="top-right">
    <p class="indicator">R</p>
  </div>
</header>
<main>
  <p class="indicator">CANVAS<br>vis.js</p>
</main>

【讨论】：

看起来棒极了，我运行了代码 sn-p 并正常工作，但由于某种原因，在我的 Angular 项目中，我无法获得底部框的完整高度。我尝试在“主要”中使用 height:100vh 的样式，但现在超过了身体的高度（我有一个滚动部分）
您必须检查真实场景的所有父元素并相应地调整样式。如果不提供Minimal, Complete, and Verifiable Example，就很难提供帮助。寻求代码帮助的问题应包括在问题本身最好在Stack Snippet 中重现它所需的最短代码。考虑用更多上下文打开一个新问题。
我在 (jsfiddle.net) 上检查了您的解决方案，它运行良好。问题是当我在我的 Angular 项目中做同样的事情时。由于某种原因没有填满页面。左右标题运行良好，但底部框未填充剩余高度。正如我告诉你的那样，我将 main 的高度设置为 100vh 并且几乎可以正常工作，但在最后添加了一个额外的空间（我可以向下滚动）。顺便说一句，谢谢你的及时回复我的朋友！ @Daniel Sixl

【解决方案2】：

首先，非常感谢您的 cmets。结合此处提出的两个答案，我找到了一个适合我需求的解决方案。

html, body {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  padding: 0;
  margin: 0;
  height: 100%;
}

.outer {
  display: flex;
  flex-flow: column;
  height: 100vh;
  border: 2px dashed blue;
}

header {
  display: flex;
}

header .top-left {
  display: flex;
  flex-basis: 20%;
  border: 2px dashed green;
  justify-content: center;
  text-align: center;
}

header .top-right {
  display: flex;
  flex: 1;
  border: 2px dashed red;
  vertical-align: center;
  justify-content: center;
  align-items: center;
}

main {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  border: 2px dashed fuchsia;
}

<div class="outer">
  <header>
    <div class="top-left"> a </div>
    <div class="top-right"> b </div>
  </header>
  <main> c </main>
</div>

我认为，我滥用了 display: flex 的使用。无论如何，至少现在正在工作。谢谢大家！！

【讨论】：