如何将可滚动 div 中邻居 div 的高度设置为相同高度

Question

在包含两个相邻 div 元素的 div 和 overflow-y:auto 中，我需要将两个 div 元素之一设置为与另一个元素相同的高度。

简化了 html 看起来像下面的例子，其中 div 和 class content 是动态生成的，另一个 div 和 class backdrop 应该与具有 class content.

的元素具有相同的高度

<div class="container"
  <div class="backdrop"></div>
  <div class="content"></div>
</div>

相反 div 和 class backdrop 获得外部 div 的高度。因此，当具有 class content 的元素溢出时，背景的高度将比具有 class content.

的 div 更小

这里有一个例子来说明这个问题。这可以修复 CSS-only 还是我需要使用 jQuery 来调整一个 div 的高度以匹配另一个？

.container {
  overflow-y: auto;
  position: relative;
  height: 400px;
}

.backdrop {
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 100, 0, 0.2);
  width: 100%;
  height: 100%;
  display: block;
}

p {
  color: #FFF;
  z-index: 1000;
  position: absolute;
  margin: auto;
  width: 100%;
    top:100px;
    font-weight: 400;
    font-size: xx-large;
    text-align: center;
}

.content {
  grid-template-columns: repeat(3, 1fr);
  display: grid;
  grid-auto-rows: 60px;
  grid-row-gap: 0px;
  grid-column-gap: 2px;
}

.cell {
  border: 2px solid red;
}

<div class="container">

  <div class="backdrop"><p>
    Wait
    </p></div>
  <div class="content">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
            <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
            <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>

</div>

Answer 1

既然你用了网格，你可能会在顶层再用一次，把两个元素都放在同一个单元格里，让背景继承高度，把它设置在左上角的粘性位置；

想法演示：

.container {
  overflow-y: auto;
  position: relative;
  height: 400px;
  display:grid;/* new */
}

.backdrop {
  z-index: 1;/*modified*/
  position: sticky;/*modified*/
  height: inherit;/*modified*/
  top: 0;
  left: 0;
  background: rgba(0, 100, 0, 0.2);
  grid-row:1;grid-column:1;/* new */
}

p {
  color: #FFF;
  z-index: 1000;
  position: absolute;
  margin: auto;
  width: 100%;
    top:100px;
    font-weight: 400;
    font-size: xx-large;
    text-align: center;
}

.content {
  grid-row:1;grid-column:1;/*new*/
  grid-template-columns: repeat(3, 1fr);
  display: grid;
  grid-auto-rows: 60px;
  grid-row-gap: 0px;
  grid-column-gap: 2px;
}

.cell {
  border: 2px solid red;
}

<div class="container">

  <div class="backdrop"><p>
    Wait
    </p></div>
  <div class="content">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
            <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
            <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>

</div>

如何将可滚动 div 中邻居 div 的高度设置为相同高度

How to set height of neighbor div in scrollable div to same height

css

height