Display an overlay to fit parent when it is a grid area-CodePudding

I have a grid (containers) to display a navbar, a main-container and a footer. In the main-container, it is also a grid to display 3 children elements in a custom disposition using grid-area. Everything works properly.

Now, I would like to display an overlay div (overlay) which has to fit the whole main-container. To do so, I just add an additional div in the main-container with the property height: 100%; width: 100%; and play with the position property without success. Indeed, position: absolute or position: fixed make it too big and I don't want to set a fixed width or height since the layout can be responsive. And with position: relative, it is not working neither.

Do you have any idea, how I could make the overlay display above the main-container while keeping the properties width: 100%; height: 100%;?

#containers {
  display: grid;
  grid-template-areas: "navbar main" "navbar footer";
  grid-template-rows: calc(100% - 32px) 32px;
  grid-template-columns: 56px calc(100% - 56px);
}

#navbar-container {
  grid-area: navbar;
  background-color: blue;
}

#main-container {
  grid-area: main;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas:
    'child1 child2' 
    'child1 child3';
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#footer-container {
  grid-area: footer;
  background-color: black;
}

#child1,
#child2,
#child3 {
  padding: 10px;
}

#child1 {
  grid-area: child1;
  background-color: red;
}

#child2 {
  grid-area: child2;
  background-color: purple;
}

#child3 {
  grid-area: child3;
  background-color: pink;
}

#footer-container {
  grid-area: footer;
}

.modal {
  width: 100%;
  height: 100%;
  background-color: grey;
  opacity: 0.5;
  position: absolute;
}

<div id="containers">
  <div id="navbar-container"></div>
  <div id="main-container">
    <div id="child1">
      <span>CHILD 1</span>
    </div>
    <div id="child2">
      <span>CHILD 2</span>
    </div>
    <div id="child3">
      <span>CHILD 3</span>
    </div>
    <div >
      MODAL
    </div>
  </div>
  <div id="footer-container"></div>
</div>

CodePudding user response：

Hello let my try to answer your question.Try to make height and width value with auto

CodePudding user response：

Just needed to make the parent relative and the modal absolute.

#containers {
  display: grid;
  grid-template-areas: "navbar main" "navbar footer";
  grid-template-rows: calc(100% - 32px) 32px;
  grid-template-columns: 56px calc(100% - 56px);
}

#navbar-container {
  grid-area: navbar;
  background-color: blue;
}

#main-container {
  grid-area: main;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas:
    'child1 child2' 
    'child1 child3';
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  position: relative;
}

#footer-container {
  grid-area: footer;
  background-color: black;
}

#child1,
#child2,
#child3 {
  padding: 10px;
}

#child1 {
  grid-area: child1;
  background-color: red;
}

#child2 {
  grid-area: child2;
  background-color: purple;
}

#child3 {
  grid-area: child3;
  background-color: pink;
}

#footer-container {
  grid-area: footer;
}

.modal {
  width: 100%;
  height: 100%;
  background-color: grey;
  opacity: 0.5;
  position: absolute;
}

<div id="containers">
  <div id="navbar-container"></div>
  <div id="main-container">
    <div id="child1">
      <span>CHILD 1</span>
    </div>
    <div id="child2">
      <span>CHILD 2</span>
    </div>
    <div id="child3">
      <span>CHILD 3</span>
    </div>
    <div >
      MODAL
    </div>
  </div>
  <div id="footer-container"></div>
</div>