Set child element to have 100% height of parent regardless of other siblings

Question

I've got this layout and I need div#loadingpopup to have a 100% height and 100% width of the parent (#jobs), overlaying/ignoring its siblings (.job-listing) so that the content of both div.job-listing is still barely visible through the semi-transparent background of div#loadingpopup. How can that be achieved?

So far I tried setting position:absolute, width and height for 100%; top and left for 0, for #loadingpopup but it works, covering the whole viewport when I needed only #jobs (parent div) to be covered with my #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>

Possible duplicate of [How to make flexbox children 100% height of their parent?](https://stackoverflow.com/questions/15381172/how-to-make-flexbox-children-100-height-of-their-parent) (I'm basing that on the fact that the question is tagged "flexbox" -- if you're not using flexbox please include all the relevant CSS you are using on these elements in the question; we can't debug based on partial information.) — Daniel Beck, Jan 27 '19 at 15:58
@DanielBeck these questions are similar, only that OP is asking about making one child in flexbox take full height regardless of other siblings, which is unnatural for the flex system and has to be done with a different approach. — Siavas, Jan 27 '19 at 16:07
Fair point @Siavas, well spotted. Retracting my "close" vote (though I'll leave the link in comments as it seems like it might still be useful) — Daniel Beck, Jan 27 '19 at 16:14

Siavas · Accepted Answer · 2019-01-27T16:24:39.953

You can achieve this with absolute positioning:

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

The tricky part here is that position: absolute; will take as reference the first non-static parent (having anything else than position: static which is default, that is). This means you will need to set position: relative to #jobs as well.

Once that is done, we can set 100% width and height and do similar absolute positioning for the span inside #loadingpopup. This can also be achieved with flexbox, using align-items: flex-end;, but in this simple scenario we can use the former for better support.

You might also want to increase the height by the child's own height, as 100% will only consider the non-absolutely positioned elements. Use calc(100% + 20px) or similar to achieve this.

Learn more about flexbox and position properties at CSS Tricks.

Thanks Siavas! You helped me. The thing was that I needed to add position:relative to my container. You clarified it with your comment on non-static position reference — Dymytrii Ishchuk, Jan 27 '19 at 17:24

Set child element to have 100% height of parent regardless of other siblings

1 Answers1