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

问题描述

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

简化后的html如下例所示，其中动态生成类div的{​​{1}}，而其他类content的{​​{1}}的高度应与类别为div的元素。

backdrop

相反，类content的{​​{1}}获取外部div的高度。因此，当类<div class="container" <div class="backdrop"></div> <div class="content"></div> </div> 的元素溢出时，背景的高度将小于类div的div。

这里有一个示例来演示此问题。是否可以仅使用CSS固定它，还是需要使用jQuery来调整一个backdrop的高度以匹配另一个？

content

content

解决方法

由于使用了网格，您可能会在顶层再次使用它，并将两个元素设置在同一单元格内，让背景继承高度并将其设置在左上角的粘滞位置；

想法演示：

.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.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>