Set height = "100% - relative top" for absolute positioned element-CodePudding

Here is a sample snippet:

.tabs {
  display: flex;
  position: relative;
}
.tab {
  height: 100px;
  background: lightgray;
}
.content {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: lightgreen;
}
.open .content {
  display: block;
}
.footer {
  height: 50px;
  background: lightblue;
}

<div class="tabs">
  <div class="tab">
    <div class="header">Tab 1</div>
    <div class="content">Content 1</div>
  </div>
  <div class="tab open">
    <div class="header">Tab 2</div>
    <div class="content">Content 2</div>
  </div>
</div>
<div class="footer">Footer</div>

The height of absolute positioned green content equals to the height of its relative positioned container. So it overlaps the footer. Is it possible to keep top position relative and to set bottom to 0? Something like:

.content {
  position: absolute;
  left: 0;
  width: 100%;
  top: relative; /* Not supported */
  bottom: 0;
  display: none;
  background: lightgreen;
}

I can set top explicitly, say, to 20px. Or I can calculate and set it using JavaScript. Is there a CSS only solution without pre-calculated top value?

CodePudding user response：

You can apply a margin to the footer to separate it from the green content.

.footer{
    margin-top: 20px;
 }

CodePudding user response：

Here is an idea using CSS grid to achieve what you want without position:absolute

.tabs {
  display: grid;
  grid-auto-flow:column; /* column flow */
}
.tab {
  display:contents; /* remove the tab div */
}
.header {
  background: lightgray;
}
.content {
  /* make all the content above each other*/
  grid-row:2;
  grid-column:1/span 20; /* use a big value here, at least equal to number of tab*/
  /**/
  height: 100px;
  display: none;
  background: lightgreen;
}
.open .content {
  display: block;
}
.footer {
  height: 50px;
  background: lightblue;
}

<div class="tabs">
  <div class="tab">
    <div class="header">Tab 1</div>
    <div class="content">Content 1</div>
  </div>
  <div class="tab open">
    <div class="header">Tab 2</div>
    <div class="content">Content 2</div>
  </div>
</div>
<div class="footer">Footer</div>