Установить дочерний элемент, чтобы иметь 100% высоты родителя независимо от других братьев и сестер

Question

У меня есть этот макет, и мне нужно, чтобы div # loadingpopup имел высоту 100% и ширину 100% родителя (#jobs), накладывая / игнорируя его братья и сестры (.job-list), чтобы содержимое обоихПеречень div.job по-прежнему едва виден на полупрозрачном фоне div # loadingpopup.Как этого достичь?

До сих пор я пытался установить положение: абсолют, ширина и высота на 100%;top и left для 0, для #loadingpopup, но это работает, покрывая весь видовой экран, когда мне нужно было только #jobs (parent div), чтобы покрыться моим # loadingpopup

<div id="jobs">
  <div class="job-listing">
    <h4 class="job__title"> Test </h4><br>
  </div>
  <div class="job-listing">
    <h4 class="job__title"> Test </h4><br>
  </div>
  <div id="loadingpopup" style="background-color:rgba(0,0,0,0.2)">
    <span><i class="fas fa-circle-notch fa-spin" style="margin-right: 16px"></i>Loading...</span>
  </div>
</div>

Answer 1

Вы можете достичь этого с абсолютным позиционированием:

#jobs {
  position: relative;
}

#loadingpopup {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#loadingpopup span {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

<div id="jobs">
  <div class="job-listing">
    <h4 class="job__title"> Test </h4><br>
  </div>
  <div class="job-listing">
    <h4 class="job__title"> Test </h4><br>
  </div>
  <div id="loadingpopup" style="background-color:rgba(0,0,0,0.2)">
    <span><i class="fas fa-circle-notch fa-spin" style="margin-right: 16px"></i>Loading...</span>
  </div>
</div>

Хитрость здесь в том, что position: absolute; примет в качестве ссылки первого нестатического родителя (имеющего что-либо кроме position: static который по умолчанию, то есть).Это означает, что вам также необходимо установить position: relative на #jobs.

Как только это будет сделано, мы можем установить 100% ширину и высоту и сделать аналогичное абсолютное позиционирование для span внутри #loadingpopup.Этого также можно добиться с помощью flexbox, используя align-items: flex-end;, но в этом простом сценарии мы можем использовать прежний для лучшей поддержки .

Вы также можете увеличить рост ребенкасвой рост, так как 100% будут учитывать только не совсем позиционированные элементы.Для этого используйте calc(100% + 20px) или аналогичный.

Узнайте больше о свойствах flexbox и position в CSS Tricks.