如何根据其他面板制作面板的高度？ [复制]答案

【问题标题】：How to make the height of a panel depending on other panels? [duplicate]如何根据其他面板制作面板的高度？ [复制]
【发布时间】：2019-06-09 06:21:14
【问题描述】：

我有三个面板，两个在左侧，一个在右侧。

<div class="row">   
    <div class="col s6">
        <div class="panel">
            content1
        </div>
        <div class="panel">
            content2
        </div>
    </div>
    <div class="col s6">
        <div class="panel">
            content3
        </div>
    </div>
</div>

我左边的两个面板的内容是可变的，面板的大小也是如此。现在我希望右侧面板的高度取决于左侧面板的大小，即它们应该在底部齐平，如下例所示：

是否可以在纯 css 中解决这个问题，或者我需要一些 js 函数来解决这个问题？

编辑：

我正在使用 Materialize，但我不知道 flexbox 是如何与 Materialize 一起工作的。

【问题讨论】：

你在使用 Bootstrap 吗？
到目前为止我没有使用 Materialize。
我可以建议一个可能的（直截了当的）引导程序答案。它不需要css?

标签： javascript css panel materialize

【解决方案1】：

希望 display flex 能解决你的问题！

.row {
    display: flex;
    background-color: #343434;
}
.col {
    flex: 1;
    text-align: center;
    align-items: center;
    justify-content:center;
}

.s6 { background-color: #7dc242; }
.s7 { background-color: #ed1c24; }

<div class="row">
    <div class="col s6">
        <div class="panel">
            content1
        </div>
        <div class="panel">
            content2
        </div>
    </div>
    <div class="col s7">
         <div class="panel">
            content3
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

如果你不使用 bootstrap，你可以通过简单的 flex 布局来实现它

.container{
  display: flex;
}
.row{
  border: 1px solid black;
  min-width: 100px;
  padding: 10px;
  flex-grow: 1;
  margin: 10px;
}

.col{
  display: flex;
  flex-direction: column;
}

<div class="container">
  <div class="col">
    <div class="row">
    1<br />
    1<br />
    1<br />
    1<br />
    </div>
    <div class="row">
    2<br />
    2<br />
    2<br />
    </div>
  </div>
  <div class="col">
    <div class="row">333</div>
  </div>
</div>

【讨论】：

这是我需要的解决方案，但我无法将它与 Materialize 结合使用。

【解决方案3】：

如果您使用 Bootstrap (v4.2.1)，您可以使用以下内容：

html:

<div class="row">
  <div class="col">
    <div class="row">
      <div class="col">
        <p>This is sample text</p>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <p>This is sample text</p>
        <p>This is sample text</p>
        <p>This is sample text</p>
        <p>This is sample text</p>
      </div>
    </div>
  </div>
  <div class="col">
    <p>This is sample text</p>
  </div>
</div>

请确保您在您的项目中include Bootstrap。

Here 是一些关于 Bootstrap 网格系统的额外信息。

【讨论】：