如何扩展div以匹配另一个div

Question

我有一个部分，我希望通过右侧的扩展菜单进行扩展。现在，我的部分projects-main-section的高度设置为800px。显然，这不会随着右侧的可扩展菜单而扩展。我已经尝试将高度设置为100％和100 vh，但这两种方法都不起作用。

所以我有两个部分，projects-main-section和project-section-container（右侧的可扩展菜单）围绕主容器projects-main。我认为这有助于让projects-main-section随之成长，但到目前为止还没有运气。

因此，随着可扩展菜单的高度增长，我希望projects-main-section随着扩展的projects-main父div而增长，但不会超过页脚。

我该怎么做？

Fiddle

以下是静态的。

当菜单展开时，它看起来像这样。您会看到左侧容器projects-main-section在页脚下方有一个很大的间隙。

<div id="projects-main">
        <div id="projects-main-section">
            <div id="projects-main-section-title-wrap">
            </div>
        </div><div id="project-section-container">
    </div>
</div>

#projects-main {
    height: auto;
}
#projects-main-section, #project-section-container {
    display: inline-block;
    vertical-align: top;
}
#projects-main-section {
    height: 800px;
    background: #6f9697;
    width: 40%;
}
#project-section-container {
    height: auto;
    width: 60%; 
}

Answer 1

我建议使用flex

＆＃13;

＆＃13;

html, body{
  margin: 0;
}
.flex{
  display:flex;
}
.flex.column {
  flex-direction: column
}
.over, .under {
  background: #0099cc;
  height: 75px;
}
.content{
  flex: 1;
}
.left_col {
  background: orange;
  width: 50%;
}
.right_col {
  background: lightgreen;
  width: 50%;
}

＆＃13;

<div class="flex column container">
  <div class="over">
  </div>
  <div class="flex content">
    <div class="left_col">
      Grows with right column
    </div>
    <div class="right_col">
      long content <br>long content <br>long content <br>long content <br>
      long content <br>long content <br>long content <br>long content <br>
      long content <br>long content <br>long content <br>long content <br>
      long content last
    </div>
  </div>
  <div class="under">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;