В div с overflow-y:auto, содержащим два соседних элемента div, мне нужно установить один из двух элементов div на ту же высоту, что и другой.

Упрощенный html выглядит как в примере ниже, где div с классом content генерируется динамически, а другой div с классом backdrop должен иметь ту же высоту, что и элемент с класс content.

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

Вместо этого div с классом backdrop получает высоту внешнего div. Поэтому, когда элемент с классом content переполняется, фон будет иметь меньшую высоту, чем div с классом content.

Вот пример, демонстрирующий проблему. Можно ли исправить это только для CSS или мне нужно использовать 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>
0
pcvnes 14 Окт 2020 в 17:13

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>
1
G-Cyrillus 14 Окт 2020 в 14:22